ECMAScript 2020 的 String.prototype.trimStart 和 String.prototype.trimEnd 方法详解-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2020 的 String.prototype.trimStart 和 String.prototype.trimEnd 方法详解

在 ECMAScript 2020 中，JavaScript 新增了两个字符串方法：String.prototype.trimStart 和 String.prototype.trimEnd。这两个方法可以用来删除字符串开头和结尾的空格字符，从而避免在字符串处理中出现空格字符导致的错误和异常，提高了字符串处理的效率和可靠性。本文将详细介绍这两个方法的用法、示例和特性，帮助读者更好地理解并应用它们。

一、String.prototype.trimStart 方法

String.prototype.trimStart 方法用于删除字符串开头的空格字符，即用空字符串替换字符串开头的空格字符。该方法不会改变原字符串，而是返回一个新的字符串，可以链式调用其它字符串方法。具体用法如下：

const str1 = '   hello world   ';
const trimmed1 = str1.trimStart();
console.log(trimmed1); // 'hello world   '

trimStart 方法不接受任何参数，即使调用时传入了参数，也会被忽略。如果原字符串开头不是空格字符，则返回原字符串。例如：

const str2 = 'hello world';
const trimmed2 = str2.trimStart();
console.log(trimmed2); // 'hello world'

需要注意的是，trimStart 方法只删除开头的空格字符，不会删除字符串结尾的空格字符。如果希望删除开头和结尾的空格字符，可以使用 String.prototype.trim() 方法。

二、String.prototype.trimEnd 方法

String.prototype.trimEnd 方法用于删除字符串结尾的空格字符，即用空字符串替换字符串结尾的空格字符。该方法不会改变原字符串，而是返回一个新的字符串，可以链式调用其它字符串方法。具体用法如下：

const str3 = '   hello world   ';
const trimmed3 = str3.trimEnd();
console.log(trimmed3); // '   hello world'

trimEnd 方法不接受任何参数，即使调用时传入了参数，也会被忽略。如果原字符串结尾不是空格字符，则返回原字符串。例如：

const str4 = 'hello world';
const trimmed4 = str4.trimEnd();
console.log(trimmed4); // 'hello world'

需要注意的是，trimEnd 方法只删除结尾的空格字符，不会删除字符串开头的空格字符。如果希望删除开头和结尾的空格字符，可以使用 String.prototype.trim() 方法。

三、示例

下面是一些示例代码，展示了 trimStart 和 trimEnd 方法的用法和效果。

1. 删除数组中每个字符串的开头空格字符

const arr = ['   hello', '  world  ', '   !  '];
const trimmedArr = arr.map(str => str.trimStart());
console.log(trimmedArr); // ['hello', 'world  ', '!  ']

2. 删除字符串中每个单词的结尾空格字符

const str = 'hello world   !   ';
const trimmedStr = str.replace(/\b\w+\b/g, word => word.trimEnd());
console.log(trimmedStr); // 'hello world!   '

3. 检查输入框中的用户名和密码是否有效

<input type="text" id="username">
<input type="password" id="password">
<button id="submit">登录</button>
<div id="message"></div>

document.getElementById('submit').addEventListener('click', function() {
  const username = document.getElementById('username').value.trimStart().trimEnd();
  const password = document.getElementById('password').value.trimStart().trimEnd();
  if (username === 'admin' && password === '123456') {
    document.getElementById('message').textContent = '登录成功';
  } else {
    document.getElementById('message').textContent = '用户名或密码不正确';
  }
});

四、特性

trimStart 和 trimEnd 方法具有以下特性：

对于非字符串参数，会自动转换为字符串类型。

String.prototype.trimStart.call(123); // '123'
String.prototype.trimEnd.call(true); // 'true'

对于对象类型参数，会自动调用其 toString 方法转换为字符串类型。

String.prototype.trimStart.call({ a: 1 }); // '[object Object]'
String.prototype.trimEnd.call([1, 2, 3]); // '1,2,3'

如果参数为 null 或 undefined，则会抛出 TypeError 类型错误。

String.prototype.trimStart.call(null); // TypeError
String.prototype.trimEnd.call(undefined); // TypeError

对于不支持 trimStart 和 trimEnd 方法的旧版本浏览器，可以使用代码兼容的方式模拟实现这两个方法。

if (!String.prototype.trimStart) {
  String.prototype.trimStart = function() {
    return this.replace(/^\s+/, '');
  };
}
if (!String.prototype.trimEnd) {
  String.prototype.trimEnd = function() {
    return this.replace(/\s+$/, '');
  };
}

trimStart 和 trimEnd 方法采用 Unicode 字符集定义的字符集合作为空格字符集合，因此可以删除任意 Unicode 空格字符，包括换行符、制表符等。

五、总结

本文详细介绍了 ECMAScript 2020 新增的 String.prototype.trimStart 和 String.prototype.trimEnd 方法的用法、示例和特性，帮助读者更好地理解和应用这两个方法。在实际的代码开发中，可以充分利用这两个方法来简化字符串处理的代码，提高代码的可读性和可维护性，使代码更加健壮和安全。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a8777badd4f0e0ff19864c