如何在 JavaScript 中获取字符串的前 N 个字符

1.slice()方法

要在 JavaScript 中获取字符串的前 N 个字符，请对字符串调用 slice() 方法，传递 0 作为第一个参数，传递 N 作为第二个参数。 例如，str.slice(0, 2) 返回一个包含 str 的前 2 个字符的新字符串。

const str = ‘Coding Beauty’;
const first2 = str.slice(0, 2);
console.log(first2); // Co
const first6 = str.slice(0, 6);
console.log(first6); // Coding
const first8 = str.slice(0, 8);
console.log(first8); // Coding B

String slice() 方法提取字符串中起始索引和结束索引之间的部分，起始索引和结束索引分别由第一个和第二个参数指定。 索引0和N之间的子串是仅包含前N个字符串字符的子串。

Note
JavaScript 中的字符串是不可变的，slice() 方法返回一个新字符串而不修改原始字符串：

const str = ‘Coding Beauty’;
const first2 = str.slice(0, 2);
console.log(first2); // Co
// Original not modified
console.log(str); // Coding Beauty

2.substring()方法

要获取字符串的前 N 个字符，我们还可以对字符串调用 substring() 方法，分别传递 0 和 N 作为第一个和第二个参数。 例如，str.substring(0, 3) 返回包含 str 的前 3 个字符的新字符串。

const str = ‘Coding Beauty’;
const first3 = str.substring(0, 3);
console.log(first3); // Cod
const first5 = str.substring(0, 5);
console.log(first5); // Codin
const first11 = str.substring(0, 11);
console.log(first11); // Coding Beau

与 slice() 类似，substring() 返回字符串的起始索引和结束索引之间的部分，起始索引和结束索引分别由第一个和第二个参数指定。

Note
substring() 返回一个新字符串而不修改原始字符串：

const str = ‘Coding Beauty’;
const first3 = str.substring(0, 3);
console.log(first3); // Cod
// Original not modified
console.log(str); // Coding Beauty

Tip
对于我们的场景，slice() 和 substring() 方法的工作方式类似，但情况并非总是如此。 它们之间有一个区别：如果第一个大于第二个，则 substring() 会交换其参数，但 slice() 返回一个空字符串 (”)：

const str = ‘Coding Beauty’;
const substr1 = str.substring(2, 0);
const substr2 = str.slice(2, 0);
// Equivalent to str.substring(0, 2)
console.log(substr1); // Co
console.log(substr2); // ” (empty string)