Angular7+项目中createNumberMask在IE11上的兼容问题求助

这个问题的根源很明确：IE11完全不支持ES6的「对象解构赋值作为函数参数并设置默认值」的语法，也就是你代码里createNumberMask({ prefix = dollarSign, ... } = {})这种写法，IE11解析时会抛出标识符错误，因为它看不懂这种ES6语法糖。

下面是具体的修复方案，分两种场景处理：

场景1：你可以直接修改createNumberMask的源码 #

把函数的ES6参数写法改成IE11兼容的ES5语法，有两种简洁的实现方式：

方式1：手动逐个赋值默认值 #

export default function createNumberMask(options) {
  // 先处理参数默认值，避免不传参数时出现undefined报错
  options = options || {};

  // 逐个给配置项设置默认值，用三元判断确保传入undefined时也能取到默认值
  var prefix = options.prefix !== undefined ? options.prefix : dollarSign;
  var suffix = options.suffix !== undefined ? options.suffix : emptyString;
  var includeThousandsSeparator = options.includeThousandsSeparator !== undefined ? options.includeThousandsSeparator : true;
  var thousandsSeparatorSymbol = options.thousandsSeparatorSymbol !== undefined ? options.thousandsSeparatorSymbol : comma;
  var allowDecimal = options.allowDecimal !== undefined ? options.allowDecimal : false;
  var decimalSymbol = options.decimalSymbol !== undefined ? options.decimalSymbol : period;
  var decimalLimit = options.decimalLimit !== undefined ? options.decimalLimit : 2;
  var requireDecimal = options.requireDecimal !== undefined ? options.requireDecimal : false;
  var allowNegative = options.allowNegative !== undefined ? options.allowNegative : false;
  var allowLeadingZeroes = options.allowLeadingZeroes !== undefined ? options.allowLeadingZeroes : false;
  var integerLimit = options.integerLimit !== undefined ? options.integerLimit : null;

  // 原来的函数逻辑完全保留，不需要修改
}

方式2：用Object.assign合并默认配置（更简洁） #

IE11原生支持Object.assign，所以可以用这种方式简化代码：

export default function createNumberMask(options) {
  // 定义所有配置项的默认值
  const defaultConfig = {
    prefix: dollarSign,
    suffix: emptyString,
    includeThousandsSeparator: true,
    thousandsSeparatorSymbol: comma,
    allowDecimal: false,
    decimalSymbol: period,
    decimalLimit: 2,
    requireDecimal: false,
    allowNegative: false,
    allowLeadingZeroes: false,
    integerLimit: null
  };

  // 合并默认配置和传入的配置，传入的配置会覆盖默认值
  const config = Object.assign({}, defaultConfig, options);

  // 之后函数里的所有变量引用，替换成config对应的属性即可
  // 比如原来用`prefix`的地方改成`config.prefix`，以此类推
}

场景2：无法修改第三方库源码（比如vendor.js是打包好的） #

如果这个掩码库是通过npm安装的第三方依赖，你需要确保项目的构建工具（比如Webpack、Rollup）把这个库也纳入ES6转ES5的范围：

• 以Webpack为例，默认情况下babel-loader会排除node_modules目录下的文件，你需要修改配置，把这个掩码库的路径加入到include列表中，让Babel转译它的ES6代码。
• 或者，你可以查看这个库的npm包是否提供了ES5版本的入口（比如在package.json的main字段指向ES5代码），如果有的话直接使用那个版本。

完成修改后，IE11就可以正常解析这个函数了，其他浏览器的兼容性也不会受到影响。

内容的提问来源于stack exchange，提问作者Exitl0l