引言
如果你是一个前端开发者，那么你一定经常需要处理字符串。在 JavaScript 的字符串处理中，trim() 方法是一个非常常用的方法。它被用来去除字符串开头和结尾的空格、制表符等空白字符。然而，在 ES10 中，JavaScript 引入了两个新的方法——trimStart() 和 trimEnd()。它们可以分别用来去除字符串开头和结尾的空白字符，为我们的字符串处理提供了更多的灵活性。在本文中，我们将深入学习这两个新方法，并介绍它们的用法和指导意义。
trimStart() 和 trimEnd() 介绍
在 JavaScript 中，使用 trim() 方法可以去除字符串开头和结尾的空格、制表符等空白字符，用法如下：
const str = " Hello World "; console.log(str.trim()); //Hello World
在 ES10 中，引入了两个新方法：trimStart() 和 trimEnd()。它们可以分别用来去除字符串开头和结尾的空白字符。它们是不可变的方法，这意味着它们不会改变原始字符串，而是返回一个新的去除空白字符后的字符串。
在使用 trimStart() 方法时，它会从字符串的开头往后迭代，直到找到第一个非空白字符，然后将该字符之前的所有字符都截取掉，返回一个新的字符串，示例代码如下：
const str = " Hello World "; console.log(str.trimStart()); //Hello World
在使用 trimEnd() 方法时，它会从字符串的结尾往前迭代，直到找到第一个非空白字符，然后将该字符之后的所有字符都截取掉，返回一个新的字符串，示例代码如下：
const str = " Hello World "; console.log(str.trimEnd()); // Hello World
需要注意的是，trimStart() 和 trimEnd() 方法在不同的浏览器中可能有不同的命名，例如在 Safari 中，它们分别被称为了 trimLeft() 和 trimRight() 方法。
案例分析
下面我们通过一个案例来理解一下 trimStart() 和 trimEnd() 的使用场景。
在项目中，我们需要从后台接口返回的数据中解析出一个图片的地址，数据格式如下：
const data = {
name: "Harry Potter",
description: "Harry Potter and the Philosopher's Stone",
imageUrl: "https://images.com/harry_potter.png",
createdOn: "2022-03-18T14:21:54.487Z"
};我们可以使用字符串模板来生成我们需要的 HTML 代码，并使用 trimStart() 和 trimEnd() 方法去除图片地址前后的空白字符，示例代码如下：
const template = `
<div>
<h1>${data.name}</h1>
<p>${data.description}</p>
<img src="${data.imageUrl.trimStart().trimEnd()}" alt="${data.name}">
<small>Created on ${new Date(data.createdOn).toLocaleDateString()}</small>
</div>
`;可以看到，在这个案例中，我们使用了 trimStart() 和 trimEnd() 方法来去除了图片地址的前后空白字符，这使得我们可以更加方便地将数据传递给模板，提高了代码的可读性和可维护性。
总结
在本文中，我们学习了 ES10 中的两个新方法——trimStart() 和 trimEnd()，它们可以分别用来去除字符串开头和结尾的空白字符，为我们的字符串处理提供了更多的灵活性。我们通过案例分析了它们的使用场景，了解了它们的指导意义。相信掌握了这两个新方法，我们的字符串处理能力将更加强大。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6544f0b57d4982a6ebeba057