你可能不知道的 10 个很棒的 JavaScript 字符串技巧 1. 如何多次复制字符串 2. 如何将字符串填充到特定长度 3. 如何将字符串拆分为字符数组 4. 如何计算字符串中的字符数 5. 如何反转字符串中的字符 6. 如何将字符串中的第一个字母大写 7. 如何根据多个分隔符拆分字符串 8. 如何检查字符串是否包含特定序列 9. 如何检查字符串是否以特定序列开头或结尾 10. 如何替换字符串的所有出现位置 结论

2025-05-25

你可能不知道的 10 个 JavaScript 字符串技巧

1. 如何多次复制字符串

2. 如何将字符串填充到特定长度

3. 如何将字符串拆分为字符数组

4. 如何计算字符串中的字符数

5. 如何反转字符串中的字符

6. 如何将字符串中的第一个字母大写

7. 如何用多个分隔符分割字符串

8. 如何检查字符串是否包含特定序列

9. 如何检查字符串是否以特定序列开头或结尾

10. 如何替换字符串的所有出现位置

结论

这篇文章最初发表在kais.blog上。

让我们一起进步！ 关注我的 Twitter，获取每日开发者技巧。感谢您阅读我的内容！

在我的上一篇文章中，我向你展示了14 个你应该知道的 JavaScript 数组技巧。这次，我们来讨论一种你可能每天都在使用的数据类型。

我们把字符序列称为字符串。这是几乎所有编程语言中都会遇到的最基本的数据类型之一。通常它没什么特别之处。然而，我想向你展示 10 个关于 JavaScript 字符串的实用技巧，你可能还不知道。

  1. 如何多次复制字符串
  2. 如何将字符串填充到特定长度
  3. 如何将字符串拆分为字符数组
  4. 如何计算字符串中的字符数
  5. 如何反转字符串中的字符
  6. 如何将字符串中的第一个字母大写
  7. 如何根据多个分隔符拆分字符串
  8. 如何检查字符串是否包含特定序列
  9. 如何检查字符串是否以特定序列开头或结尾
  10. 如何替换字符串的所有出现位置

1. 如何多次复制字符串

JavaScript 字符串可以轻松重复。您可以使用该String#repeat方法，而无需手动复制字符串。

// Concatenate "ha" 3 times.
const laughing = "ha".repeat(3);
console.log(laughing); // "hahaha"

// Concatenate "1" 8 times.
const eightBits = "1".repeat(8);
console.log(eightBits ); // "11111111"
Enter fullscreen mode Exit fullscreen mode

2. 如何将字符串填充到特定长度

有时，您希望字符串具有特定的长度。如果字符串太短，您可能希望填充剩余空间，直到达到指定的长度。过去，人们经常使用库来实现这一点。这导致了臭名昭著的left-pad事件的负面影响。但是，现在您可以使用String#padStart和String#padEnd。选择哪种方法取决于您是在字符串的开头还是结尾填充。

// Add "0" to the beginning until the string has a length of 8.
const eightBits = "001".padStart(8, "0");
console.log(eightBits); // "00000001"

// Add "*" to the end until the string has a length of 5.
const anonymizedCode = "34".padEnd(5, "*");
console.log(anonymizedCode); // "34***"
Enter fullscreen mode Exit fullscreen mode

3. 如何将字符串拆分为字符数组

将字符串拆分为字符数组的方法有很多种。我更喜欢使用扩展运算符 ( ...)。

const word = "apple";
const characters = [...word];
console.log(characters); // ["a", "p", "p", "l", "e"]
Enter fullscreen mode Exit fullscreen mode

请注意，此方法并非总能按预期工作。有关更多信息，请参阅下一个提示。

4. 如何计算字符串中的字符数

简单。您可以使用该length属性。

const word = "apple";
console.log(word.length); // 5
Enter fullscreen mode Exit fullscreen mode

但是，等一下！有时候，这会表现出一些奇怪的行为。请看以下示例：

const word = "𩸽";
console.log(word.length); // 2
Enter fullscreen mode Exit fullscreen mode

奇怪！日语汉字hokke返回length2。为什么？JavaScript 将大多数字符表示为 16 位代码点。但是，有些字符表示为两个（或更多）16 位代码点。这称为代理对。如果您使用该length属性，它不会使用人类感知的长度。相反，JavaScript 会告诉您使用了多少个代码点。因此，𩸽（hokke）由两个代码点组成。因此，返回了错误的值。

我们能做些什么吗？嗯，可以。扩展运算符 ( ...) 又一次拯救了我们。

const word = "𩸽";
const characters = [...word];
console.log(characters.length) // 1;
Enter fullscreen mode Exit fullscreen mode

但这并非全部。它在大多数情况下都有效，但也存在一些极端情况。例如，如果你正在处理表情符号，有时这个长度也可能是错误的。如果你真的想计算人类感知的字符，那么你必须将单词拆分成字素簇。不幸的是，这超出了本文的讨论范围。

5. 如何反转字符串中的字符

反转字符串中的字符很容易。只需将扩展运算符 ( ...)、Array#reverse方法和Array#join方法组合起来即可。

const word = "apple";
const reversedWord = [...word].reverse().join("");
console.log(reversedWord); // "elppa"
Enter fullscreen mode Exit fullscreen mode

再次强调，和上一个技巧一样，也存在一些罕见的极端情况。你可能需要先将单词拆分成字素簇。同样，这超出了本文的讨论范围。抱歉！

6. 如何将字符串中的第一个字母大写

将字符串的首字母大写是一个非常常见的操作。虽然许多编程语言都有原生的方法来实现这一点，但 JavaScript 需要一些额外的工作。

let word = "apple";

// Concatenate capitalized first character with remaining word.
word = word[0].toUpperCase() + word.substr(1);

console.log(word); // "Apple"
Enter fullscreen mode Exit fullscreen mode 
// This shows an alternative way
let word = "apple";

// Use spread operator (`...`) to split into characters.
// Transform first character and join array.
const characters = [...word];
characters[0] = characters[0].toUpperCase();
word = characters.join("");

console.log(word); // "Apple"
Enter fullscreen mode Exit fullscreen mode

请记住，我们感知到的字符可能与 JavaScript 感知到的字符不同。请参阅第 4 条解释。

7. 如何用多个分隔符分割字符串

假设你想根据分隔符拆分字符串。因此，你可以使用这个String#split方法。你可能知道这一点。但是，你知道你可以同时根据多个分隔符拆分字符串吗？这可以通过正则表达式来实现：

// Let's split on comma (,) and semicolon (;).
const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/);
console.log(fruits); // ["apples", "bananas", "cherries"]
Enter fullscreen mode Exit fullscreen mode

8. 如何检查字符串是否包含特定序列

在字符串中搜索是一项常见的任务。在 JavaScript 中，你可以使用 方法来轻松完成此操作String#includes，无需正则表达式。

const text = "Hello, world! My name is Kai!"
console.log(text.includes("Kai")); // true
Enter fullscreen mode Exit fullscreen mode

9. 如何检查字符串是否以特定序列开头或结尾

与 #8 类似，你可以在字符串的开头或结尾进行搜索。为此，你可以使用String#startsWith和String#endsWith方法。

const text = "Hello, world! My name is Kai!"

console.log(text.startsWith("Hello")); // true

console.log(text.endsWith("world")); // false
Enter fullscreen mode Exit fullscreen mode

10. 如何替换字符串的所有出现位置

有多种方法可以替换所有出现的字符串。您可以使用方法以及带有全局String#replace标志的正则表达式。或者，您可以使用 new方法。请注意，此新方法尚未在所有浏览器和 Node.js 版本中可用。String#replaceAll

const text = "I like apples. You like apples."

console.log(text.replace(/apples/g, "bananas"));
// "I like bananas. You like bananas."

console.log(text.replaceAll("apples", "bananas"));
// "I like bananas. You like bananas."
Enter fullscreen mode Exit fullscreen mode

结论

字符串是几乎所有编程语言中最基本的数据类型之一。它也是新开发人员最先学习的数据类型之一。然而，尤其是在 JavaScript 中，许多开发人员并不了解字符串的一些有趣细节。希望我的这篇文章能让你感兴趣！我会尝试在未来更新一些新的技巧。

非常感谢您阅读这篇文章。请考虑与您的朋友和同事分享。期待与您再次相见！

让我们一起进步！ 关注我的 Twitter，获取每日开发者技巧。感谢您阅读我的内容！

这篇文章最初发表在kais.blog上。

文章来源：https://dev.to/kais_blog/10-awesome-javascript-string-tips-you-might-not-know-about-4ep2
Devto 翻译
PREV
100 多个前端项目助您提升技能
NEXT
每个 Web 开发人员都应该熟悉的 12 个 JavaScript 基本网站