包括（）不适用于所有浏览器

Posted 2023-02-23

【中文标题】包括（）不适用于所有浏览器

【英文标题】：includes() not working in all browsers

【发布时间】：2015-09-29 05:00:35

【问题描述】：

这里是我的代码块。它在 fireFox 和 Chrome 中完美运行。但不是在 IE 中。我收到错误“Object doesn't support property or method 'includes'”

function rightTreeSwapfunc2() 
    if ($(".right-tree").css("background-image").includes("stage1") == true) 
        $(".right-tree").css(
            backgroundImage: "url(/plant-breeding/img/scenes/plant-breeding/stage5.jpg)"
        )
     else 
        $(".right-tree").css(
            backgroundImage: "url(/plant-breeding/img/scenes/plant-breeding/stage3.jpg)"
        )
    

我可以稍微改变一下并使用 vanilla JS 来做：

document.getElementById("right-tree").classList.contains

但我宁愿在更改 JS 和编辑 html 和 CSS 之前看看是否有办法让它在 IE 中工作。

【问题讨论】：

我觉得奇怪的是，伟大的平衡器 jQueery 未能将所有浏览器降低到最低公分母 - 如果includes 在 IE 中不起作用，它不应该在任何浏览器中起作用

includes() 跨浏览器功能不稳定

includes 与 jQueery 无关 - 问题有缺陷：p

您使用的是 1.x 还是 2.x 版本的 jQuery？另外，我同意 Tushar 的观点 - 将 polyfill 添加到您的页面中，以防其他浏览器不支持此功能。

.includes() 函数与 jQuery 无关。 .css() 是一个 jQuery 函数并返回一个字符串。 .includes() 是 IE 不支持的 ES6 中定义的 string 对象上的函数。您的代码与在没有 jQuery 的情况下执行 "foo".includes("o"); 完全相同。

【参考方案1】：

如果你看includes()的文档，大部分浏览器都不支持这个属性。

在使用toString() 将属性转换为字符串后，您可以使用广泛支持的indexOf()：

if ($(".right-tree").css("background-image").indexOf("stage1") > -1) 
//                                           ^^^^^^^^^^^^^^^^^^^^^^

你也可以使用来自MDN的polyfill。

if (!String.prototype.includes) 
    String.prototype.includes = function() 
        'use strict';
        return String.prototype.indexOf.apply(this, arguments) !== -1;
    ;

【讨论】：

不得不换掉我的.includes() 实例以实现 IE 兼容性。我将haystack.includes(needle) 更改为haystack.indexOf(needle) !== -1，它适用于IE11。

如果有人需要，可以直接用字符串来使用： if (SomeString.indexOf("SubString") > -1) //Somecode

【参考方案2】：

IE11 确实实现了 String.prototype.includes 那么为什么不使用官方的 Polyfill 呢？

来源：polyfill source

  if (!String.prototype.includes) 
    String.prototype.includes = function(search, start) 
      if (typeof start !== 'number') 
        start = 0;
      

      if (start + search.length > this.length) 
        return false;
       else 
        return this.indexOf(search, start) !== -1;
      
    ;
  

【讨论】：

对于 Angular 2+ 用户：使用具有正确 polyfill 的 import 'core-js/es7/array'，import 'core-js/es6/array' 没有 'includes'跨度>

【参考方案3】：

就我而言，我发现使用“string.search”更好。

var str = "Some very very very long string";
var n = str.search("very");

如果它对某人有帮助。

【参考方案4】：

这里是解决方案（参考：https://www.cluemediator.com/object-doesnt-support-property-or-method-includes-in-ie）

if (!Array.prototype.includes) 
  Object.defineProperty(Array.prototype, 'includes', 
    value: function (searchElement, fromIndex) 

      if (this == null) 
        throw new TypeError('"this" is null or not defined');
      

      // 1. Let O be ? ToObject(this value).
      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If len is 0, return false.
      if (len === 0) 
        return false;
      

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      function sameValueZero(x, y) 
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      

      // 7. Repeat, while k < len
      while (k < len) 
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(searchElement, elementK) is true, return true.
        if (sameValueZero(o[k], searchElement)) 
          return true;
        
        // c. Increase k by 1. 
        k++;
      

      // 8. Return false
      return false;
    
  );

【参考方案5】：

import 'core-js/es7/array' 

进入 polyfill.ts 对我有用。