String.prototype.trimStart()和trimEnd()

String.prototype.trimStart()和trimEnd()的引入

ECMAScript 10新增了trimStart()和trimEnd()两个字符串方法，用于更精确地控制字符串空白字符的修剪行为。这两个方法分别对应trimLeft()和trimRight()的别名，提供了更符合直觉的命名方式。它们与现有的trim()方法形成完整的三件套，让开发者能够针对字符串开头或结尾的空白进行选择性处理。

方法定义与基本用法

trimStart()方法移除字符串开头的空白字符，trimEnd()则处理字符串末尾的空白。这里的"空白字符"包括：空格(space)、制表符(tab)、换行符(newline)等所有空白字符(包括不间断空格等)。

const str = '   hello world   ';

console.log(str.trimStart()); // "hello world   "
console.log(str.trimEnd());   // "   hello world"
console.log(str.trim());      // "hello world"

与trimLeft()和trimRight()的关系

这两个新方法是已有方法的别名，功能完全相同：

String.prototype.trimStart === String.prototype.trimLeft;   // true
String.prototype.trimEnd === String.prototype.trimRight;    // true

虽然功能相同，但ECMAScript规范推荐使用trimStart/trimEnd这种更一致的命名方式，因为：

1. 与其他语言(如C#)保持一致
2. 与数组的shift/unshift命名方式不同，避免混淆
3. 更符合"start/end"这种现代API命名惯例

空白字符的具体含义

这些方法移除的空白字符包括：

• 普通空格(U+0020)
• 制表符(U+0009)
• 垂直制表符(U+000B)
• 换页符(U+000C)
• 不换行空格(U+00A0)
• 字节顺序标记(U+FEFF)
• 以及所有其他具有"Space_Separator"特性的Unicode字符

const specialWhitespace = '\u0009\u000B\u000C\u0020\u00A0\uFEFF';
const text = specialWhitespace + 'text' + specialWhitespace;

console.log(text.trimStart().length); // 4 ("text" + 结尾空白)
console.log(text.trimEnd().length);  // 5 (开头空白 + "text")

实际应用场景

1. 表单输入处理：

function processInput(input) {
  // 只移除开头空白，保留用户可能有意输入的结尾空白
  return input.trimStart();
}

2. 日志文件处理：

const logEntry = '   [2023-01-01] ERROR: Something went wrong    \n';
const cleanEntry = logEntry.trimEnd(); // 保留缩进，移除行尾空白和换行

3. 多行模板字符串处理：

function html(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str.trimStart(); // 移除每行开头缩进
    if (i < values.length) result += values[i];
  });
  return result;
}

性能考虑

对于大字符串或高频操作，这些方法比正则表达式更高效：

// 较慢的正则方案
str.replace(/^\s+/, '');  // trimStart替代方案
str.replace(/\s+$/, '');  // trimEnd替代方案

// 更快的原生方法
str.trimStart();
str.trimEnd();

浏览器兼容性与polyfill

虽然现代浏览器都支持这些方法，但在旧环境中可以使用以下polyfill：

if (!String.prototype.trimStart) {
  String.prototype.trimStart = String.prototype.trimLeft;
}

if (!String.prototype.trimEnd) {
  String.prototype.trimEnd = String.prototype.trimRight;
}

// 或者更完整的实现
if (!String.prototype.trimStart) {
  String.prototype.trimStart = function() {
    return this.replace(/^[\s\uFEFF\xA0]+/, '');
  };
}

与其他方法的比较

与类似字符串方法的对比：

在函数式编程中的应用

这两个方法特别适合函数式编程的链式调用：

const processText = (text) => 
  text
    .trimStart()
    .split('\n')
    .map(line => line.trimEnd())
    .join('\n');

const result = processText('   hello   \n   world   ');
// "hello\nworld"

处理特殊空白字符

这些方法能正确处理各种Unicode空白字符：

const exoticStr = '\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A文本\u2000\u2001';

console.log(exoticStr.trimStart().length); // 3 (中文"文本" + 结尾空白)
console.log(exoticStr.trimEnd().length);   // 13 (开头空白 + 中文"文本")

与模板标签函数结合

在模板标签函数中特别有用：

function indent(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str.trimEnd(); // 移除每行结尾空白
    if (i < values.length) result += values[i];
  });
  return result;
}

const message = indent`
    Hello
    World
`;

在数据清洗中的应用

处理CSV或TSV数据时非常实用：

function parseTSV(tsv) {
  return tsv.split('\n')
    .map(line => line.trimEnd()) // 移除行尾可能的空白
    .filter(line => line.trimStart().length > 0) // 忽略空行
    .map(line => line.split('\t'));
}

与正则表达式配合

可以结合正则表达式实现更复杂的处理：

const markdownText = '   ## Heading   ';
const headingText = markdownText.trimStart().replace(/^#+\s*/, '');
console.log(headingText); // "Heading   "

处理多行字符串的对齐

保持多行字符串的视觉对齐同时去除实际空白：

function alignCode(code) {
  const lines = code.split('\n');
  const firstLineIndent = lines[0].match(/^\s*/)[0].length;
  
  return lines.map(line => 
    line.trimStart().padStart(line.length - firstLineIndent)
  ).join('\n');
}

在字符串插值中的使用

处理动态生成的字符串时保持格式整洁：

const user = { name: ' Alice ' };
const greeting = `Hello, ${user.name.trimEnd()}!`.trimStart();

console.log(greeting); // "Hello, Alice !"

与国际化相关的考虑

这些方法能正确处理各种语言的空白字符：

const arabicText = '   نص عربي   ';
console.log(arabicText.trimStart()); // "نص عربي   "
console.log(arabicText.trimEnd());   // "   نص عربي"

在Node.js环境中的使用

处理文件系统路径时特别有用：

const path = require('path');
const userInput = '/some/path/  ';

const resolvedPath = path.resolve(userInput.trimEnd());
console.log(resolvedPath);

与JSON处理的结合

在解析JSON前后进行精确的空白控制：

const jsonString = '   {"name":"John"}   ';
const obj = JSON.parse(jsonString.trim());
// 或者更精确的控制
const obj2 = JSON.parse(jsonString.trimStart().trimEnd());

在TypeScript中的类型安全

TypeScript完全支持这些方法：

function greet(name: string): string {
  return `Hello, ${name.trimEnd()}!`.trimStart();
}