對象不支持「startsWith」屬性或方法

項目兼容性問題

開發環境

• 360瀏覽器
• vue "^2.5.17"
• vue-cli3

問題

對象不支持「startsWith」屬性或方法
startsWith()方法用來判斷當前字符串是不是以另一個給定的子字符串「開頭」的，根據判斷結果返回 true 或 false。
查閱MDN，發現ie根本就不支持，所以使用ie內核的360瀏覽器必然也不支持

解決方案

這個是es6字符串的一個方法，可是ie不支持，所以只能使用babel-polyfill，這個是對這些不支持方法的實現，解決方法以下：

• npm install babel-polyfill -S
• import 'babel-polyfill' --- 在index.js中引入

新問題 在360上很奇怪，有的頁面還會報這個錯 而後我就把MDN的的polyfill給引過來了

• 新建一個polyfill.js，代碼以下

if (!String.prototype.startsWith) {
  (function() {
    'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
    var defineProperty = (function() {
      // IE 8 only supports `Object.defineProperty` on DOM elements
      try {
        var object = {};
        var $defineProperty = Object.defineProperty;
        var result = $defineProperty(object, object, object) && $defineProperty;
      } catch(error) {}
      return result;
    }());
    var toString = {}.toString;
    var startsWith = function(search) {
      if (this == null) {
        throw TypeError();
      }
      var string = String(this);
      if (search && toString.call(search) == '[object RegExp]') {
        throw TypeError();
      }
      var stringLength = string.length;
      var searchString = String(search);
      var searchLength = searchString.length;
      var position = arguments.length > 1 ? arguments[1] : undefined;
      // `ToInteger`
      var pos = position ? Number(position) : 0;
      if (pos != pos) { // better `isNaN`
        pos = 0;
      }
      var start = Math.min(Math.max(pos, 0), stringLength);
      // Avoid the `indexOf` call if no match is possible
      if (searchLength + start > stringLength) {
        return false;
      }
      var index = -1;
      while (++index < searchLength) {
        if (string.charCodeAt(start + index) != searchString.charCodeAt(index)) {
          return false;
        }
      }
      return true;
    };
    if (defineProperty) {
      defineProperty(String.prototype, 'startsWith', {
        'value': startsWith,
        'configurable': true,
        'writable': true
      });
    } else {
      String.prototype.startsWith = startsWith;
    }
  }());
}

而後再main.js引入這個js

import './util/polyfill'