Javascript .replaceAll() 不是函数类型错误

Posted 2023-03-16

【中文标题】Javascript .replaceAll() 不是函数类型错误

【英文标题】：Javascript .replaceAll() is not a function type error

【发布时间】：2020-10-30 16:02:14

【问题描述】：

文档页面：https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/String/replaceAll

let string = ":insertx: :insertx: :inserty: :inserty: :insertz: :insertz:";
let newstring = string.replaceAll(":insertx:", 'hello!');

当我运行它时，我收到Uncaught TypeError: string.replaceAll is not a function。也许我误解了原型是什么，但该函数似乎是一个可用的字符串方法。

我正在使用 Chrome。

【问题讨论】：

你从哪里知道.replaceAll()是一个String方法

文档链接中的示例代码，它在文档的标题中

replaceAll 在几个月内作为原生 V8 字符串方法出现。目前，它仍然不可用。

继续填充它

@Opcode 它显然是新的（或新的）

【参考方案1】：

str.replaceAll 函数是在 ES2021 ES12 中添加的，所以在旧版本的浏览器和 nodejs 中没有定义它。

【参考方案2】：

您可以自己轻松定义：

if(typeof String.prototype.replaceAll === "undefined") 
    String.prototype.replaceAll = function(match, replace) 
       return this.replace(new RegExp(match, 'g'), () => replace);
    

并使用它：

"fafa".replaceAll("a", "o");
>>> fofo

【参考方案3】：

将replace 与带有全局modifier 的正则表达式一起使用，以获得更好的浏览器支持。 （查看browser compatibility table on MDN，查看每个浏览器的哪个版本开始支持replaceAll方法。）

let string = ":insertx: :insertx: :inserty: :inserty: :insertz: :insertz:";
let newstring = string.replace(/:insertx:/g, 'hello!');
console.log(newstring);

对于更通用的解决方案，我们可以转义正则表达式元字符并使用RegExp 构造函数。您还可以将函数添加到 String.prototype 作为 polyfill。

（需要对要替换的字符串进行转义，以便正则表达式中具有特殊含义的字符将按字面意思解释，例如. 将仅指实际的点而不是任何字符。）

//Taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
function escapeRegExp(string) 
  return string.replace(/[.*+?^$()|[\]\\]/g, '\\$&'); // $& means the whole matched string

function replaceAll(str, match, replacement)
   return str.replace(new RegExp(escapeRegExp(match), 'g'), ()=>replacement);


console.log(replaceAll('a.b.c.d.e', '.', '__'));
console.log(replaceAll('a.b.c.d.e', '.', '$&'));

可以在here 找到符合规范的垫片。

【参考方案4】：

虽然有点离题，但我在这里偶然发现了我的用例，它没有列出，所以这里是为像我这样的人准备的。我需要隐藏一个词，但如果它开始以某些字符，即 dev。而且，还有通配符 * 帮助我做到了。

'Fullstack developer'.replace(/dev.*/g, '') // => Fullstack

注意：注意点。

【参考方案5】：

如果您不想升级 Chrome 也不想使用 reg 表达式（因为它们的性能较差），您也可以这样做：

let string = ":insertx: :insertx: :inserty: :inserty: :insertz: :insertz:";
let newstring = string.split(":insertx:").join('hello!');

当然，如果您想在任何地方使用它，您也可以附加到 String 原型。但由于真正的 replaceAll 具有更多功能（支持正则表达式），因此您这样做会更安全：

String.prototype.replaceAllTxt = function replaceAll(search, replace)  return this.split(search).join(replace); 

【讨论】：

太棒了。这应该是公认的答案，因为它还提供了解决方案，并且涵盖了兼容性问题。

【参考方案6】：

.replaceAll 将从 Chrome 85 开始提供。当前版本为 83。

如果您下载 Google Chrome Canary（版本 86），您将能够看到您的代码运行良好。 Firefox 在版本 78 上，并且由于 .replaceAll 从版本 77 开始可用，它也可以在那里工作。它也适用于当前的 Safari。 Microsoft Edge 将其视为不受支持。

您可以在问题文章的底部找到支持的浏览器版本。