includes() 不适用于所有浏览器

Question

这是我的代码块。它在 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 中工作。

Answer 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;
    };
}

Answer 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;
      }
    };
  }

Answer 3

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

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

以防对某人有帮助。

Answer 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;
    }
  });
}

Answer 5

import 'core-js/es7/array'

进入 polyfill.ts 对我有用。

includes() 不适用于所有浏览器

includes() not working in all browsers

javascript

methods

internet-explorer

function

microsoft-edge