ES12 中的 `String.prototype.trimStart` 和 `String.prototype.trimEnd` 方法：如何优雅地处理空格-JavaScript中文网-JavaScript教程资源分享门户

ES12 中的 `String.prototype.trimStart` 和 `String.prototype.trimEnd` 方法：如何优雅地处理空格

在我们的前端开发中，处理字符串的操作是非常常见的。而且，在字符串处理过程中，空格的处理也是比较基础的操作。幸运的是，ECMAScript 12（简称ES12）为我们带来了两个新的字符串方法：trimStart和trimEnd。这两个方法可以让我们更加方便优雅地处理字符串中的空格。

`String.prototype.trimStart`和`String.prototype.trimEnd`方法的介绍

在ES12中，String原型对象新增了两个方法：trimStart和trimEnd。它们分别用于去除字符串开头和结尾的空格，从方法名就可以看出来，trimStart是去除字符串头部的空白，而 trimEnd 是去除字符串尾部的空白。

为了更好的理解这两个方法的功能，快速看一下如何使用：

const str = '    Trim my head and tail spaces     ';
console.log(str.trimStart()); // 'Trim my head and tail spaces     '
console.log(str.trimEnd()); // '    Trim my head and tail spaces'
console.log(str.trim()); // 'Trim my head and tail spaces'

从这个例子中可以看出，trimStart方法可以删除字符串开头的空格，trimEnd方法可以删除字符串结尾的空格，而 trim 方法则可以删除字符串头部和尾部的空格。

为什么要使用`String.prototype.trimStart`和`String.prototype.trimEnd`方法

在ES6中，我们已经加入了String.prototype.trim方法，用来删除字符串头部和尾部的空格。但是，它的局限性在于只能去掉头部和尾部的空格，不能像trimStart和trimEnd一样只去掉头部或尾部的空格，随意并不灵活。

在实际开发中，我们很多场景需要使用去除头部或尾部空格，而不能同时去除头部和尾部的空格。trimStart和trimEnd方法的出现就是为了解决这个问题，帮助我们更好地处理字符串。

常用场景

表单输入框前后的空格

在前端表单（特别是用户输入）过程中，经常会出现用户的输入内容包含首尾空格的情况。使用trimStart和trimEnd方法将这些前后的空格删除，可以确保你的输入数据有效。
URL查询参数

在调用 API 的过程中，我们有时候需要将一些数据拼接到 URL 的查询参数中，这时如果我们的参数中含有前后空格，将会导致 URL 错误，这时候可以使用trimStart和trimEnd方法来去除空格。
珍惜资源，合理控制紧凑

很多时候，我们的代码中会包含一些缩进、空格或换行符，这些多余的空格将会对代码大小产生一定的影响。使用trimStart和trimEnd方法将这些空格删除，将有助于我们优化我们的代码，使它们更为紧凑。

总结

在本文中，我们介绍了ES12中新增的String原型方法，trimStart和trimEnd。我们还介绍了这两个方法以及它们的使用场景，同时，我们还理解了这些方法如何优雅地处理前后空格，这样可以帮助我们在实际的开发中轻松地去除不必要的空格，提高代码的性能。

最后我们可以尝试将这个方法运用到自己的代码中，尽可能的减少代码量，让我们的程序更为紧凑高效。

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

ES12 中的 `String.prototype.trimStart` 和 `String.prototype.trimEnd` 方法：如何优雅地处理空格