稻壳网站建设国内设计欣赏网站

ES8（ECMAScript 2017）引入了两个非常有用的字符串填充方法：padStart() 和 padEnd()，它们可以用来在字符串的两端添加指定的填充字符，从而达到指定的字符串长度。这些方法非常适合用于格式化文本和对齐输出。

1. padStart()

1.1 用法

padStart() 方法用于将当前字符串填充到指定的长度，如果当前字符串的长度已经大于或等于指定长度，则返回原字符串。填充的字符可以自定义，默认使用空格。

const str = '5';
const paddedStr = str.padStart(3, '0');
console.log(paddedStr); // "005"
语法：str.padStart(targetLength, padString)

• targetLength：最终字符串的长度。如果当前字符串长度大于或等于目标长度，返回原字符串。
• padString：可选，填充的字符。如果没有指定，默认使用空格。填充字符的长度必须小于或等于目标长度。

1.2 使用场景

padStart() 通常用于字符串的对齐，特别是在格式化数字和时间时，确保字符串的长度一致。

例子：格式化日期

const day = '7';
const paddedDay = day.padStart(2, '0');
console.log(paddedDay); // "07"

• 用于日期、时间等需要对齐的地方，确保每个部分的长度一致。
• 例子：数字对齐

const numbers = ['1', '10', '100', '1000'];
const paddedNumbers = numbers.map(num => num.padStart(4, '0'));
console.log(paddedNumbers); // ['0001', '0010', '0100', '1000']

在列出数字、对齐输出时，使用 padStart() 可以使数字在显示时更加整齐。

2. padEnd()

2.1 用法

padEnd() 方法用于将当前字符串填充到指定的长度，在字符串的末尾添加填充字符。如果当前字符串的长度已经大于或等于目标长度，则返回原字符串。

const str = '5';
const paddedStr = str.padEnd(3, '0');
console.log(paddedStr); // "500"

• 语法：str.padEnd(targetLength, padString)
• targetLength：最终字符串的长度。如果当前字符串长度大于或等于目标长度，返回原字符串。
• padString：可选，填充的字符。如果没有指定，默认使用空格。填充字符的长度必须小于或等于目标长度。

2.2 使用场景

padEnd() 方法适用于字符串的右对齐或在字符串末尾添加额外的字符，常见于表格格式化、文本显示等。

例子：格式化表格

const headers = ['Name', 'Age', 'Location'];
const paddedHeaders = headers.map(header => header.padEnd(15, ' '));
console.log(paddedHeaders);
// ["Name           ", "Age            ", "Location       "]

用于文本输出时，确保每个字段的长度一致。
例子：数字格式化

const prices = ['5', '12', '123', '45'];
const paddedPrices = prices.map(price => price.padEnd(5, '0'));
console.log(paddedPrices); // ['50000', '12000', '12300', '45000']

对于数字的格式化，padEnd() 可以确保数字显示时具有一致的长度。

3. 总结

padStart()：
作用：用于在字符串的开始处填充字符，直到字符串的长度达到指定值。
常见场景：格式化数字、对齐日期、时间等，确保字符串长度一致。
padEnd()：
作用：用于在字符串的末尾填充字符，直到字符串的长度达到指定值。
常见场景：文本输出格式化、表格对齐、字符串显示等。
例子：填充固定长度的电话号码

const phone = '123';
const paddedPhone = phone.padStart(10, '0');
console.log(paddedPhone); // "0000000123"

使用 padStart() 来补充固定长度的电话号码，确保输出一致。
通过 padStart() 和 padEnd()，可以轻松实现字符串的对齐、格式化和填充，大大提高了处理字符串时的便利性。

ES9（ECMAScript 2018）引入了多个有用的特性，其中 剩余参数（rest）、扩展运算符（spread） 和 正则表达式命名捕获组 是非常实用的功能，能够帮助开发者更高效地编写代码。以下是这些特性的详细用法总结。

4. 剩余参数（Rest Parameters）

4.1 用法

剩余参数（rest parameters）使得函数能够接收不定数量的参数，并将它们作为一个数组传递到函数内部。它使用语法 ... 来表示剩余参数，并且它必须是函数参数列表中的最后一个参数。

function sum(...args) {return args.reduce((acc, curr) => acc + curr, 0);
}console.log(sum(1, 2, 3, 4)); // 10

• 语法：…parameterName
• parameterName 是一个数组，它包含了所有传递给函数的参数（从 … 后面开始的所有参数）。

4.2 使用场景

剩余参数可以用于函数参数不确定的场景，特别是当我们不确定函数会接收到多少个参数时。它提供了一种更简洁的方式来处理多个参数。

例子：合并数组

function mergeArrays(...arrays) {return arrays.flat();
}const result = mergeArrays([1, 2], [3, 4], [5, 6]);
console.log(result); // [1, 2, 3, 4, 5, 6]

• 在这个例子中，…arrays 用来接收多个数组参数并将它们合并。
• 例子：提取对象属性

const person = { name: 'Alice', age: 30, job: 'Engineer' };function displayPersonInfo({ name, ...rest }) {console.log(`Name: ${name}`);console.log('Other info:', rest);
}displayPersonInfo(person);
// Output:
// Name: Alice
// Other info: { age: 30, job: 'Engineer' }

• 在这里，…rest 捕获了除了 name 之外的所有属性。

5. 扩展运算符（Spread Operator）

5.1 用法

扩展运算符（spread operator）使用语法 … 来将一个数组或对象展开成独立的元素或属性。这与剩余参数类似，但其主要作用是“展开”而不是“收集”。

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
console.log(newArr); // [1, 2, 3, 4, 5]

• 语法：…array 或 …object
• … 作用是将数组或对象中的元素（或属性）展开。

5.2 使用场景

扩展运算符主要用于数组和对象的合并、复制、修改等操作。

例子：合并数组

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

• 扩展运算符可以轻松地将多个数组合并。
• 例子：复制数组

const arr = [1, 2, 3];
const copyArr = [...arr];
console.log(copyArr); // [1, 2, 3]

• 使用扩展运算符可以快速创建数组的浅拷贝。
• 例子：复制对象
  js

const person = { name: 'Alice', age: 30 };
const updatedPerson = { ...person, job: 'Engineer' };
console.log(updatedPerson); // { name: 'Alice', age: 30, job: 'Engineer' }

• 扩展运算符也可以用来复制对象，并在复制的同时添加或更新属性。

6. 正则表达式命名捕获组（Named Capture Groups）

6.1 用法

ES9 引入了正则表达式的命名捕获组，允许通过名称来引用正则表达式中的捕获组。以前我们只能通过索引来引用捕获组，而现在可以使用 ?P 来命名捕获组，使代码更具可读性和可维护性。

const regex = /(?P<firstName>\w+) (?P<lastName>\w+)/;
const match = regex.exec('John Doe');
console.log(match.groups.firstName); // "John"
console.log(match.groups.lastName);  // "Doe"

• 语法：(?Ppattern)
• name 是捕获组的名称。
• pattern 是正则表达式模式，表示捕获的内容。

6.2 使用场景

命名捕获组使得复杂的正则表达式更加易读，特别是在处理多个捕获组时，使用名称而非数字索引来引用捕获的部分，可以提高代码的可读性和可维护性。

• 例子：提取日期中的年、月、日

const regex = /(?P<year>\d{4})-(?P<month>\d{2})-(?P<day>\d{2})/;
const match = regex.exec('2023-02-17');
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "02"
console.log(match.groups.day);   // "17"

• 使用命名捕获组，能够清晰地知道哪个组对应的是年份、月份和日期。
• 例子：提取 URL 的协议和域名

const regex = /(?P<protocol>\w+):\/\/(?P<domain>[\w.-]+)/;
const url = 'https://www.example.com';
const match = regex.exec(url);
console.log(match.groups.protocol);  // "https"
console.log(match.groups.domain);    // "www.example.com"

• 命名捕获组使得我们可以直观地访问正则表达式中匹配的各部分内容，而无需记住每个捕获组的索引。

7. 总结

1. 剩余参数（Rest Parameters）

• 用途：将不定数量的参数收集到一个数组中，简化函数的参数处理。
• 场景：处理不定数量的参数、提取对象属性等。

2. 扩展运算符（Spread Operator）

• 用途：将数组或对象展开成独立的元素或属性。
• 场景：数组合并、复制对象、快速扩展和修改对象/数组。

3. 正则表达式命名捕获组（Named Capture Groups）

• 用途：通过命名捕获组，使正则表达式的捕获组更加具可读性和可维护性。
• 场景：提取复杂的匹配数据，增加代码可读性。
  这些 ES9 的特性使得 JavaScript 编程更加简洁、灵活，并且提高了代码的可维护性，特别是在处理不定数量参数、合并数据、提取复杂数据时，能够显著减少代码的复杂度。