ES10 中的 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法详解

在 ES10 中，新增了两个字符串方法：trimStart() 和 trimEnd()，它们分别用于去除字符串开头和结尾的空白字符。这两个方法的实现非常简单，但是它们对于前端开发来说却非常有用，本文将详细介绍这两个方法的使用和意义。

trimStart() 方法

trimStart() 方法用于去除字符串开头的空白字符，它的语法如下：

string.trimStart()

该方法没有参数，调用该方法会返回一个新的字符串，该字符串是原字符串去除开头空白字符后的结果。

示例代码

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

trimEnd() 方法

trimEnd() 方法用于去除字符串结尾的空白字符，它的语法如下：

string.trimEnd()

该方法没有参数，调用该方法会返回一个新的字符串，该字符串是原字符串去除结尾空白字符后的结果。

示例代码

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

深入理解 trimStart() 和 trimEnd() 方法

虽然 trimStart() 和 trimEnd() 方法的实现非常简单，但是它们对于前端开发来说却非常有用。在实际开发中，我们经常需要处理用户输入的数据，而用户输入的数据往往包含一些不必要的空白字符。如果我们不对这些空白字符进行处理，就会导致一些不必要的问题。

示例代码

const input = '  Hello World  ';
if (input === 'Hello World') {
  console.log('匹配成功');
} else {
  console.log('匹配失败');
}

以上代码的输出结果是 '匹配失败'，因为 input 与 'Hello World' 之间包含了一些空白字符。如果我们使用 trimStart() 和 trimEnd() 来处理 input，就可以避免这个问题。

const input = '  Hello World  ';
if (input.trimStart().trimEnd() === 'Hello World') {
  console.log('匹配成功');
} else {
  console.log('匹配失败');
}

以上代码的输出结果是 '匹配成功'。

注意事项

虽然 trimStart() 和 trimEnd() 方法非常有用，但是需要注意以下几点：

1. 这两个方法只能用于字符串类型的数据，如果你使用其他类型的数据调用这两个方法，会抛出 TypeError 异常。
2. 这两个方法返回的是新的字符串，不会修改原字符串。
3. 这两个方法只能去除空白字符，不能去除其他字符。

总结

ES10 中的 trimStart() 和 trimEnd() 方法是非常实用的字符串方法，它们能够帮助我们去除字符串开头和结尾的空白字符，避免一些不必要的问题。在实际开发中，我们应该充分利用这两个方法，提高代码的质量和效率。

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