ECMAScript 2021 (ES12) 中的 String.prototype.trimStart 和 trimEnd 方法解决字符串首尾空格问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常遇到需要处理字符串的场景。其中，字符串的首尾空格问题是比较常见的一个问题。在 ECMAScript 2021 (ES12) 中，新增了 String.prototype.trimStart 和 trimEnd 方法，为解决字符串首尾空格问题提供了更便捷的解决方案。

什么是 String.prototype.trimStart 和 trimEnd 方法？

String.prototype.trimStart 和 trimEnd 方法是在字符串原型上新增的方法，用于去除字符串中开头和结尾的空格。

在 ES11（即 ECMAScript 2020）中，新增了 String.prototype.trimEnd 方法。而在 ES12 中，新增了 String.prototype.trimStart 方法，用于去除字符串开始的空格。这两个方法的作用类似，都是用于去除字符串中的空格。从字面意思上理解，trimStart 可以理解为去掉字符串“开始”的空格，trimEnd 可以理解为去掉字符串“结尾”的空格。

trimStart 和 trimEnd 方法的使用方法

trimStart 和 trimEnd 方法都没有接受参数，可以直接在字符串实例上调用。

const str = '   Hello World    '
console.log(str.trimStart()) // "Hello World    "
console.log(str.trimEnd()) // "   Hello World"

如何兼容低版本的浏览器？

由于 trimStart 和 trimEnd 方法都是 ES11 和 ES12 中新增的方法，因此在低版本的浏览器中可能不被支持。为了保证代码兼容性，可以通过以下方式进行兼容：

// javascriptcn.com 代码示例
// 兼容 trimStart 方法
if (!String.prototype.trimStart) {
  String.prototype.trimStart = function() {
    return this.replace(/^\s+/g, '');
  };
}

// 兼容 trimEnd 方法
if (!String.prototype.trimEnd) {
  String.prototype.trimEnd = function() {
    return this.replace(/\s+$/g, '');
  };
}

这段兼容代码的作用是在 String 原型上添加 trimStart 和 trimEnd 方法。如果当前浏览器支持这两个方法，则不做处理。

总结

字符串的首尾空格问题是比较常见且容易被忽略的一个问题。ES11 和 ES12 中新增的 String.prototype.trimEnd 和 trimStart 方法为解决这个问题提供了更方便的解决方案，可以大大减少冗余代码的编写。当然，在浏览器兼容性方面需要注意，可以通过兼容代码进行处理。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652c72ce7d4982a6ebe30ecf