ES9 中的 String.prototype.trimStart() 和 String.prototype.trimEnd() 使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在 ES9 中，JavaScript 引入了两个新的字符串方法：String.prototype.trimStart() 和 String.prototype.trimEnd()。这两个方法分别用于去除字符串开头和结尾的空格，它们的出现使得字符串的处理更加方便和高效。

使用方法

String.prototype.trimStart() 方法用于去除字符串开头的空格，它的使用方法如下：

const str = '   hello world   ';
const trimmedStr = str.trimStart();
console.log(trimmedStr); // 'hello world   '

String.prototype.trimEnd() 方法用于去除字符串结尾的空格，它的使用方法如下：

const str = '   hello world   ';
const trimmedStr = str.trimEnd();
console.log(trimmedStr); // '   hello world'

需要注意的是，这两个方法返回的是新字符串，不会修改原始字符串。

使用技巧

1. 处理用户输入

在用户输入时，经常会出现输入前或输入后多余的空格，使用 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法可以轻松去除这些空格，提高用户体验。

const input = document.querySelector('#input');
input.addEventListener('blur', function() {
  const value = input.value.trimStart().trimEnd();
  // 处理用户输入
});

2. 处理字符串模板

在使用模板字符串时，经常需要对模板字符串进行处理，使用 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法可以去除多余的空格，使得模板字符串更加清晰和易于阅读。

// javascriptcn.com 代码示例
const name = 'Alice';
const age = 20;
const str = `
  Name: ${name.trimStart()} 
  Age: ${age.trimEnd()}
`;
console.log(str);
// Name: Alice
// Age: 20

3. 处理多行字符串

在处理多行字符串时，经常需要去除每行的空格，使用 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法可以轻松去除每行的空格，使得代码更加整洁和易于维护。

const str = `
  hello world
    foo bar
  baz
`;
const lines = str.trim().split('\n').map(line => line.trimStart().trimEnd());
console.log(lines);
// ['hello world', 'foo bar', 'baz']

总结

String.prototype.trimStart() 和 String.prototype.trimEnd() 是 ES9 中新增的两个字符串方法，它们可以方便地去除字符串开头和结尾的空格，提高了字符串的处理效率和代码的可读性。在实际开发中，我们可以使用这两个方法处理用户输入、字符串模板和多行字符串等场景，使得代码更加整洁和易于维护。

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