ES10：String.prototype.{trimStart, trimEnd} 方法使用指南

在 JavaScript 的最新版本中，ES10（2019），String 对象新增了两个方法，分别是 trimStart 和 trimEnd。这两个方法用于去除字符串开头和结尾的空格，同 trim() 方法一样，只不过它们只处理字符串的首尾。

方法介绍

1. trimStart()

trimStart() 方法用于去除字符串开头的空格，并返回新字符串，原字符串不变。如果字符串开头没有空格，则直接返回原字符串。

语法：str.trimStart()

示例：

const str1 = '    Hello World!';
const result1 = str1.trimStart(); // 'Hello World!'
console.log(result1);

const str2 = 'Hello World!';
const result2 = str2.trimStart(); // 'Hello World!'
console.log(result2);

2. trimEnd()

trimEnd() 方法用于去除字符串结尾的空格，并返回新字符串，原字符串不变。如果字符串结尾没有空格，则直接返回原字符串。

语法：str.trimEnd()

示例：

const str1 = 'Hello World!    ';
const result1 = str1.trimEnd(); // 'Hello World!'
console.log(result1);

const str2 = 'Hello World!';
const result2 = str2.trimEnd(); // 'Hello World!'
console.log(result2);

案例分析

下面来看一个例子，假设有一个输入框，用户输入了用户名，但是前后有空格，我们需要去除这些空格并显示在页面上。

<input type="text" id="username-input" placeholder="请输入用户名" />
<div id="display"></div>

const usernameInput = document.getElementById('username-input');
const display = document.getElementById('display');

usernameInput.addEventListener('blur', () => {
  const username = usernameInput.value.trim(); // 去除开头和结尾的空格
  display.innerHTML = `您输入的用户名是：${username}`;
});

总结

使用 trimStart 和 trimEnd 方法可以方便地去除字符串开头和结尾的空格，避免在实际开发中产生多余的错误。在处理用户输入、字符串处理等场景中有广泛的应用。希望本文能够对您有所帮助，谢谢阅读！

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