ES12 中的 String.prototype.trimStart() /trimEnd() 的应用和误用

在 ES12 中，新添加了 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法，它们分别用于去除字符串开头和结尾的空白字符。这些方法可以帮助我们更方便地处理字符串，但是在使用它们时，也需要注意一些误用的情况。

应用

去除字符串开头和结尾的空白字符

使用 trimStart() 方法可以去除字符串开头的空白字符，trimEnd() 方法可以去除字符串结尾的空白字符，示例如下：

const str = '   hello world   ';
console.log(str.trimStart()); // 'hello world   '
console.log(str.trimEnd()); // '   hello world'

处理多行字符串

在处理多行字符串时，我们经常需要去除每一行开头和结尾的空白字符，可以使用 trimStart() 和 trimEnd() 方法配合正则表达式来实现，示例如下：

const str = `
  hello world
  foo bar
`;
const trimmed = str.replace(/^\s+|\s+$/gm, '');
console.log(trimmed);
// 'hello world\nfoo bar'

去除 Unicode 码点大于 255 的空白字符

有些空白字符的 Unicode 码点大于 255，使用 trim() 方法无法去除，可以使用 trimStart() 和 trimEnd() 方法来去除，示例如下：

const str = '  \u200B  hello world  \u200B  ';
console.log(str.trim()); // '\u200B  hello world  \u200B'
console.log(str.trimStart()); // 'hello world  \u200B'
console.log(str.trimEnd()); // '  \u200B  hello world'

误用

不支持参数

与 trim() 方法不同，trimStart() 和 trimEnd() 方法不支持传递参数，如果需要去除指定字符，可以使用正则表达式或者其他方法来实现。

不兼容旧版本浏览器

由于 trimStart() 和 trimEnd() 方法是 ES12 中新增的，不兼容旧版本浏览器，如果需要在旧版本浏览器中使用，需要使用 polyfill 或者其他方法来实现。

不支持链式调用

与大多数字符串方法不同，trimStart() 和 trimEnd() 方法不支持链式调用，如果需要多次处理字符串，需要使用多行代码或者其他方法来实现。

指导意义

在使用 trimStart() 和 trimEnd() 方法时，需要注意以下几点：

• 了解其应用场景，避免误用；
• 在处理多行字符串时，使用正则表达式配合 trimStart() 和 trimEnd() 方法可以更方便地去除每一行开头和结尾的空白字符；
• 在处理 Unicode 码点大于 255 的空白字符时，可以使用 trimStart() 和 trimEnd() 方法来去除；
• 在旧版本浏览器中使用时，需要注意兼容性问题。

总结

ES12 中的 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法可以帮助我们更方便地处理字符串，但是在使用它们时，也需要注意一些误用的情况。了解其应用场景和使用方法，可以更好地提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65703c8ad2f5e1655d8f4e82