万字爆肝!没想到JS中string的方法已经有36个了,来看看你知道多少

引言

在编写 JavaScript 代码时,字符串是经常用到的数据类型之一,因此了解如何使用字符串方法是非常重要的,我突发奇想要不做一个汇总吧!于是就有了这一篇文章,因为随着更新也有不少方法以及被弃用了,所以我没有算在内,不过除去已经弃用的方法还有足足36个,来看看这么多的方法你知道多少吧!

常用的字符串方法

一些简单的且非常常用的方法我就不展开来详细写了,虽然文章并非按照方法使用顺序排列,但是最后的几个方法属实是很"阴间",基本用不上~ 一些见的没那么多的方法我会写的详细一些,大家有什么问题都可以在评论区提出来哦~

1. length

length 方法返回字符串的长度,这是一个非常常用的方法,用于确定字符串中字符的数量。

示例:

javascript 复制代码
const str = "Hello, World!";
const length = str.length;
console.log(length); // 输出 13

2. charAt(index)

charAt(index) 方法返回字符串中指定索引位置的字符。索引从 0 开始,对应于字符串中的字符位置。

示例:

javascript 复制代码
const str = "JavaScript";
const char = str.charAt(2);
console.log(char); // 输出 "v"

3.at(index)

是不是感觉很眼熟,这不和上面的chartAt()简直是亲兄弟吗?哈哈哈没错,at(): 是 ES2021(ES12)引入的新方法,同样用于获取指定位置的字符。在一些最新的 JavaScript 环境中才可用。

除了at() 是比较新的方法,可能不支持所有旧的 JavaScript 环境。在使用 at() 之前,你必须要首先确保一下你的目标环境是支持它的,它们的功能是相似的,都用于获取指定位置的字符。在大多数情况下,你可以使用 charAt() 方法,我也建议你使用charAt() ,因为它具有更广泛的支持。因为它具有更广泛的支持。

我也不知道为啥添加了一个at()方法,可能是少写几个字母?哈哈哈,我也不清楚,希望有大佬能在评论区给我答疑一下,万分感谢~

4. charCodeAt(index)

charCodeAt(index) 方法返回字符串中指定索引位置的字符的 Unicode 编码。

javascript 复制代码
const str = "A";
const charCode = str.charCodeAt(0);
console.log(charCode); // 输出 65 (A 的 Unicode 编码)

5. concat()

concat() 方法用于连接两个或多个字符串,并返回一个新的字符串。

javascript 复制代码
const str1 = "Hello";
const str2 = "World";
const result = str1.concat(", ", str2, "!");
console.log(result); // 输出 "Hello, World!"

concat() 方法可以用于将多个字符串合并成一个,这在构建动态字符串或处理文本时非常有用。但是我们要注意哦:它不会修改原始字符串,而是返回一个新的字符串。你还可以通过多次调用 concat() 方法来连接更多的字符串。

6. includes(searchString)

includes(searchString) 方法用于检查字符串是否包含指定的子字符串。如果包含,返回 true;否则,返回 false

javascript 复制代码
const str = "JavaScript is amazing!";
const hasSubstring = str.includes("amazing");
console.log(hasSubstring); // 输出 true

includes() 方法通常用于搜索、过滤、或执行某些操作,以确定特定的子字符串是否存在于给定的文本中。它提供了一种便捷的方式来检查字符串的包含关系。其实就是常说的增删查改中的查找的一种~

7. indexOf(searchValue)

indexOf(searchValue) 方法返回子字符串首次出现的位置。如果子字符串不存在,返回 -1。

javascript 复制代码
const str = "JavaScript is amazing!";
const position = str.indexOf("is");
console.log(position); // 输出 12

8. lastIndexOf(searchValue)

作为IndexOf的好兄弟,我猜你光看名字也能看出来它们的关系吧~ lastIndexOf(searchValue) 方法返回子字符串最后一次出现的位置。如果子字符串不存在,返回 -1。

javascript 复制代码
const str = "JavaScript is amazing! And JavaScript is fun!";
const position = str.lastIndexOf("is");
console.log(position); // 输出 28

9. startsWith(searchString)

startsWith(searchString) 方法用于检查字符串是否以指定的子字符串开始。如果是,返回 true;否则,返回 false

javascript 复制代码
const str = "Hello, World!";
const startsWithHello = str.startsWith("Hello");
console.log(startsWithHello); // 输出 true

startsWith() 方法通常用于校验字符串的起始部分,以确定是否符合特定的格式或前缀。这对于验证用户输入、解析文件头部等场景非常有用。

10. endsWith(searchString)

有开始肯定就有结束啦~ endsWith(searchString) 方法用于检查字符串是否以指定的子字符串结束。如果是,返回 true;否则,返回 false

javascript 复制代码
const str = "Hello, World!";
const endsWithWorld = str.endsWith("World!");
console.log(endsWithWorld); // 输出 true

11. replace(searchValue, newValue)

replace(searchValue, newValue) 方法用于在字符串中查找指定的子字符串(或正则表达式模式),并将其替换为新的字符串。这个方法通常用于字符串的修改和替换操作。

javascript 复制代码
const text = "Hello, World! Hello, Universe!";

// 使用 replace 方法将第一个 "Hello" 替换为 "Hi"
const newText = text.replace("Hello", "Hi");
console.log(newText); // "Hi, World! Hello, Universe!"

// 如果要替换所有 "Hello",可以使用正则表达式
const regex = /Hello/g;
const allNewText = text.replace(regex, "Hi");
console.log(allNewText); // "Hi, World! Hi, Universe!"

上面的示例中,我们首先使用 replace() 方法将第一个 "Hello" 替换为 "Hi"。然后,我们使用正则表达式 /Hello/g 来替换所有 "Hello" 为 "Hi"。

需要注意的是,replace() 方法默认只替换第一个匹配项,如果要替换所有匹配项,需要使用正则表达式,并在正则表达式上添加全局标志 g

这个方法在字符串处理和文本替换中非常有用,可以帮助你快速地修改字符串内容。根据你的需求,可以使用字符串或正则表达式作为搜索模式。

12. replaceAll(searchValue, newValue)

replaceAll() 方法是replace()的好兄弟,你看它多穿了一条叫All"裤子"就知道了 ,它允许你一次性替换字符串中的多个匹配项。你可以指定一个正则表达式或一个简单的字符串作为模式,然后将所有匹配模式的部分替换为指定的替代字符串。

以下是一个示例:

javascript 复制代码
const text = "Hello, World! Hello, Universe!";

// 使用 replaceAll 替换所有 "Hello" 为 "Hi"
const newText = text.replaceAll("Hello", "Hi");
console.log(newText); // "Hi, World! Hi, Universe!"

在这个示例中,我们有一个字符串 text 包含两次 "Hello"。使用 replaceAll() 方法,我们将所有 "Hello" 替换为 "Hi",得到了新的字符串 newText

replaceAll() 方法非常方便,尤其在需要一次性替换多个匹配项时,它比使用 replace() 方法多次调用效率更高。你可以使用字符串或正则表达式作为模式,根据具体的需求来进行替换操作。

13. search(regexp)

search(regexp) 方法用于在字符串中检索指定的正则表达式,并返回匹配的第一个位置。

javascript 复制代码
const str = "Learn JavaScript. It's fun!";
const position = str.search(/JavaScript/);
console.log(position); // 输出 6

14. slice(start, end)

slice(start, end) 方法用于提取字符串的一部分并返回一个新字符串。startend 分别表示提取的起始位置和结束位置,end参数是可选的。

javascript 复制代码
const str = "JavaScript is amazing!";
const newStr = str.slice(0, 10);
console.log(newStr); // 输出 "JavaScript"

假如我们选择忽略end参数,那么slice() 方法将提取从 start 位置到字符串末尾的部分:

javascript 复制代码
const text = "Hello, World!";
const slicedText = text.slice(7);
console.log(slicedText); // 输出 "World!"

slice() 方法可以用于截取字符串中的特定部分,例如获取文件扩展名、提取 URL 中的路径等。

15. substring(start, end)

substring(start, end) 方法与 slice 类似,用于提取字符串的一部分并返回一个新字符串。startend 分别表示提取的起始位置和结束位置,所以说两个参数都是可选的哦~

javascript 复制代码
const str = "JavaScript is amazing!";
const newStr = str.substring(11, 19);
console.log(newStr); // 输出 "amazing"

不过与 slice() 不同,substring() 不允许传递负数作为参数。如果传递了负数,它会被视为 0。此外,如果忽略了 end 参数的话,substring() 将提取从 start 位置到字符串末尾的部分,与 slice() 相似。

16. toLowerCase()

toLowerCase() 方法用于将字符串转换为小写。

javascript 复制代码
const str = "JavaScript";
const lowerCaseStr = str.toLowerCase();
console.log(lowerCaseStr); // 输出 "javascript"

17. toUpperCase()

toUpperCase() 方法用于将字符串转换为大写。

javascript 复制代码
const str = "JavaScript";
const upperCaseStr = str.toUpperCase();
console.log(upperCaseStr); // 输出 "JAVASCRIPT"

18. toLocaleLowerCase()

toLocaleLowerCase() 方法的作用你应该能猜到了吧,它确实还是允许你将字符串转换为小写形式的一个方法,但是和toLowerCase()相比,肯定是有区别的,toLocaleLowerCase() 会考虑到特定的区域设置和语言规则,以便正确地映射字符的大小写。

这个方法是根据特定区域设置执行大小写转换的,这意味着它会根据不同的语言和地区规则来处理字符的大小写。这对于多语言应用程序或需要遵循不同语言规则的文本处理非常有用。

以下是一个示例:

javascript 复制代码
const text = "Hello, World!";

// 使用 toLocaleLowerCase 方法将字符串转换为小写
const lowerText = text.toLocaleLowerCase("tr-TR"); // 使用土耳其的区域设置
console.log(lowerText); // "hello, world!"

// 同一个字符串,在不同的区域设置下转换为小写
const lowerTextDE = text.toLocaleLowerCase("de-DE"); // 使用德国的区域设置
console.log(lowerTextDE); // "hello, world!"

const lowerTextFR = text.toLocaleLowerCase("fr-FR"); // 使用法国的区域设置
console.log(lowerTextFR); // "hello, world!"

在上面的示例中,我们首先有一个包含大写字符的字符串 "Hello, World!"。然后,我们使用 toLocaleLowerCase() 方法,分别传递了土耳其、德国和法国的区域设置。每种区域设置下,字符串都以符合该地区语言规则的方式转换为小写形式。

这个方法对于跨语言应用程序和需要遵循不同地区规则的文本处理非常有用。它可以确保你的文本在各种语境下都得到正确的处理。

19. toLocaleUpperCase()

toLocaleLowerCase()都有了那么toLocaleUpperCase()的作用你应该随便也能猜到吧~ 其实就是和转换小写加上Locale一样,把大写转换加上了根据特定区域设置执行,我就不重复写一样的内容啦~

20. trim()

trim() 方法用于去除字符串两端的空格。

javascript 复制代码
const str = "   Hello, World!   ";
const trimmedStr = str.trim();
console.log(trimmedStr); // 输出 "Hello, World!"

在上面的示例中,我们有一个包含前导和尾随空白字符的字符串 " Hello, World! "。我们使用 trim() 方法从两端去除了空白字符,而不会修改原始字符串,原始字符串保持不变。

使用 trim() 方法可以有效地清理用户输入的文本,确保它没有额外的空格或空白字符。这在许多文本处理场景中非常有用。

21. trimEnd()

trim()End 方法会从字符串的结尾移除空白字符,并返回一个新的字符串,而不会修改原始字符串,trimRight() 是该方法的别名。

既然都可以从两端删去空格了,那么我们从前面或者后面单独来删也应该很合理吧,确实以下是一个示例:

javascript 复制代码
const text = "   Hello, World!   ";

// 使用 trimEnd 方法去除结尾的空白字符
const trimmedText = text.trimEnd();
console.log(trimmedText); // "   Hello, World!"

// 原始字符串没有被修改
console.log(text); // "   Hello, World!   "

在上面的示例中,我们有一个包含前导和尾随空白字符的字符串 " Hello, World! "。我们使用 trimEnd() 方法从字符串的结尾去除了空白字符,而不会修改原始字符串,原始字符串保持不变。

22. trimStart()

好啦三兄弟整整齐齐,trimStart()方法会从字符串的结尾移除空白字符,并返回一个新的字符串,而不会修改原始字符串,trimLeft() 是该方法的别名。剩下的不用我多说了吧,简直是一模一样~

23. split(separator)

split(separator) 方法用于将字符串拆分为数组,根据指定的 separator进行拆分,separator可以是一个字符串或正则表达式,表示在哪些位置拆分字符串。split 方法将会返回一个包含拆分后的子字符串的数组。

示例:

javascript 复制代码
const text = "apple,banana,kiwi";
const fruitsArray = text.split(",");
console.log(fruitsArray); // 输出 ["apple", "banana", "kiwi"]

const sentence = "This is a sample sentence.";
const wordsArray = sentence.split(" ");
console.log(wordsArray); // 输出 ["This", "is", "a", "sample", "sentence."]

const data = "John,25,New York";
const personArray = data.split(/,|;/);
console.log(personArray); // 输出 ["John", "25", "New York"]

在第一个示例中,我们使用逗号作为分隔符将包含多个水果名称的字符串拆分为一个水果数组。

在第二个示例中,我们使用空格作为分隔符将一个句子拆分为一个包含每个单词的数组。

在第三个示例中,我们使用正则表达式 /,|;/ 作为分隔符,表示要匹配逗号 , 或分号 ;split() 方法会根据这个正则表达式将包含个人信息的字符串拆分为一个包含姓名、年龄和城市的数组。

split() 方法允许你将包含多个项目的字符串转换为数组,以便更容易地进行处理和操作。你可以根据具体的需求选择合适的分隔符来拆分字符串。

24. raw()

raw() 静态方法是用于处理模板字符串的标签函数。模板字符串是一种特殊的字符串,通常用于多行文本或需要插入变量的字符串。

标签函数允许您自定义模板字符串的处理方式。raw() 是JavaScript中的内置标签函数,它返回模板字符串的原始内容,不会进行转义处理。它的作用类似于 Python 中的 r 前缀或 C# 中用于字符串字面量的 @ 前缀。它用于获取模板字符串的原始字符串形式------即,替换表达式(例如 ${foo})会被替换处理,但转义序列(例如 \n)不会被处理。

下面是一个示例,演示如何使用 raw() 方法:

javascript 复制代码
const name = "Alice";
const age = 30;

const message = String.raw`Hi, my name is ${name} and I'm ${age} years old.\n`;

console.log(message);

在这个示例中,raw 标签函数会将模板字符串中的变量 ${name}${age} 保持原样,不会进行转义。这使得 \n 字符也会保持原样,而不会被解释为换行符。

String.raw() 方法在需要保留模板字符串的原始内容时非常有用,特别是在处理正则表达式、文件路径和其他需要转义的字符串时。它确保字符串的内容不会受到转义字符的影响。

25. match(regexp)

match(regexp) 方法用于在字符串中检索指定的正则表达式,并返回匹配的结果数组。如果没有匹配,它将返回 null

以下是 match() 方法的语法:

javascript 复制代码
string.match(regexp)
  • regexp: 一个正则表达式对象,用于指定匹配规则。

match() 方法会在字符串中查找所有与正则表达式匹配的子字符串,并将它们存储在一个数组中。如果正则表达式包含全局标志 (g),则会查找所有匹配项,否则只会找到第一个匹配项。

示例:

javascript 复制代码
const text = "Hello, my email is user@example.com and user2@example.com";
const regex = /user(\d)@example\.com/g;

const matches = text.match(regex);

console.log(matches); // ["user@example.com", "user2@example.com"]

在这个示例中,我们首先定义了一个包含多个匹配的文本字符串 text 和一个正则表达式 regex,该正则表达式用于匹配多个电子邮件地址,并捕获用户编号。然后,我们使用 match() 方法来查找所有匹配的结果。

match() 方法返回一个数组,包含所有匹配的字符串。在这个示例中,matches 数组包含了两个匹配项,即两个电子邮件地址。

需要注意的是,如果正则表达式包含捕获组,match() 方法会返回一个数组,其中第一个元素是整个匹配的字符串,后续元素是每个捕获组的匹配内容。

26. matchAll(regexp)

match()的好兄弟来了:matchAll() 方法是用于检索字符串与正则表达式进行匹配的所有结果,包括捕获组,然后返回一个包含匹配结果的迭代器。这个方法通常用于在字符串中查找多个匹配项,并且能够更方便地获取匹配结果的详细信息。

matchAll() 方法返回一个迭代器,你可以使用 for...of 循环来遍历匹配结果。每个迭代值是一个包含匹配信息的数组,其中第一个元素是匹配的字符串,后续元素是每个捕获组的匹配内容。

示例:

javascript 复制代码
const text = "Hello, my email is user1@example.com and user2@example.com";
const regex = /user(\d)@example\.com/g;

const matches = text.matchAll(regex);

for (const match of matches) {
  console.log(`Match: ${match[0]}`);
  console.log(`Capture Group: ${match[1]}`);
}

在这个示例中,我们首先定义了一个包含多个匹配的文本字符串 text 和一个正则表达式 regex,该正则表达式用于匹配多个电子邮件地址,并捕获用户编号。然后,我们使用 matchAll() 方法来查找所有匹配的结果,然后使用 for...of 循环来遍历每个匹配。

match[0] 包含整个匹配的字符串,而 match[1] 包含捕获的用户编号。通过遍历迭代器,我们可以访问每个匹配项的详细信息。

这对于需要处理文本中的多个匹配项,尤其是需要访问捕获组信息的情况非常有用。

27. padStart(targetLength, padString)

padStart(targetLength, padString) 方法在字符串前面填充指定字符,直到字符串达到目标长度。

javascript 复制代码
const str = "42";
const paddedStr = str.padStart(5, "0");
console.log(paddedStr); // 输出 "00042"

这个示例中,我们有一个字符串 text,其值为 "42"。我们使用 padStart(5, "0") 方法,指定了目标长度为 5,要用字符 "0" 来填充。所以就将 "0" 添加到字符串的前面,使其达到了目标长度变成了"00042",也就是长度为5。

这个方法一般用在需要满足字符串长度的时候比较有用,比如说在生成格式化的日期和时间字符串时,可以用于确保日期或时间的位数是固定的。

28. padEnd(targetLength, padString)

这又是两个好兄弟,光看名字其实你也能知道它们的区别了padEnd(targetLength, padString) 方法是在字符串的后面填充指定的字符,直到字符串达到目标长度。

javascript 复制代码
const str = "42";
const paddedStr = str.padEnd(5, "0");
console.log(paddedStr); // 输出 "42000"

29. localeCompare()

localeCompare() 方法是用于比较两个字符串的排序顺序的方法。它返回一个数字,表示参考字符串在排序顺序中是在给定字符串之前、之后还是与之相同。这个方法通常用于实现国际化和排序功能。

以下是 localeCompare() 方法的语法:

javascript 复制代码
string.localeCompare(compareString[, locales[, options]])
  • compareString: 与当前字符串进行比较的字符串。
  • locales (可选): 一个字符串数组,表示一个或多个区域设置标记,或者是 BCP 47 语言标记。
  • options (可选): 一个对象,包含排序和比较选项,如 sensitivity(敏感性)、ignorePunctuation(忽略标点符号)等。

localeCompare() 方法会返回以下值:

  • 如果字符串与 compareString 相同,返回 0
  • 如果字符串在排序顺序中位于 compareString 之前,返回一个负数。
  • 如果字符串在排序顺序中位于 compareString 之后,返回一个正数。

示例:

javascript 复制代码
const string1 = "apple";
const string2 = "banana";
const string3 = "apple";

const result1 = string1.localeCompare(string2);
const result2 = string2.localeCompare(string1);
const result3 = string1.localeCompare(string3);

console.log(result1); // 输出负数
console.log(result2); // 输出正数
console.log(result3); // 输出 0

在这个示例中,localeCompare() 方法用于比较字符串 string1string2result1 为负数,表示 string1 在排序顺序中位于 string2 之前。result2 为正数,表示 string2 在排序顺序中位于 string1 之前。result30,表示 string1string3 相同。

这个方法在多语言环境下,特别是需要进行字符串排序和比较时非常有用,因为它可以考虑到不同语言的排序规则。

30. fromCharCode()

fromCharCode() 是一个静态方法,用于创建一个字符串,该字符串是由指定的 UTF-16 码元序列组成。这个方法接受一个或多个数字参数,这些数字代表 UTF-16 码元,然后返回一个字符串,其中的字符由这些码元表示。

下面是 fromCharCode() 方法的语法:

javascript 复制代码
String.fromCharCode(char1, char2, ..., charN)
  • char1, char2, ..., charN: 一个或多个表示 UTF-16 码元的整数值。

示例:

javascript 复制代码
const char1 = 72; // 表示字符 "H" 的 UTF-16 码元
const char2 = 101; // 表示字符 "e" 的 UTF-16 码元
const char3 = 108; // 表示字符 "l" 的 UTF-16 码元
const char4 = 108; // 表示字符 "l" 的 UTF-16 码元
const char5 = 111; // 表示字符 "o" 的 UTF-16 码元

const greeting = String.fromCharCode(char1, char2, char3, char4, char5);

console.log(greeting); // 输出 "Hello"

在这个示例中,我们使用 fromCharCode() 方法,传入了一系列整数值,这些整数值分别代表了 "Hello" 这个字符串中的每个字符的 UTF-16 码元。最后,fromCharCode() 方法将这些码元组合成一个字符串 "Hello"。

31. fromCodePoint()

fromCodePoint() 是一个静态方法,它用于创建一个字符串,该字符串由指定的码位序列组成。这个方法接受一个或多个参数,每个参数都代表一个码位,然后返回一个字符串,其中包含由这些码位组成的字符。看着眼熟不~和上一个简直一模一样好吧!哈哈哈,不过它们还是有区别的:

下面是 String.fromCodePoint() 方法的语法:

javascript 复制代码
String.fromCodePoint(codePoint1, codePoint2, ..., codePointN)
  • codePoint1, codePoint2, ..., codePointN: 一个或多个表示码位的整数值。

示例:

javascript 复制代码
const codePoint1 = 72; // 表示字符 "H" 的码位
const codePoint2 = 101; // 表示字符 "e" 的码位
const codePoint3 = 108; // 表示字符 "l" 的码位
const codePoint4 = 108; // 表示字符 "l" 的码位
const codePoint5 = 111; // 表示字符 "o" 的码位

const greeting = String.fromCodePoint(codePoint1, codePoint2, codePoint3, codePoint4, codePoint5);

console.log(greeting); // 输出 "Hello"

String.fromCharCode() 方法不同,String.fromCodePoint() 方法更适合处理码位,而不仅仅是 UTF-16 码元。这使它成为处理大于0xFFFF(BMP之外的码位)的字符更方便的方法~

32. isWellFormed()

isWellFormed() 方法是用来检查字符串是否包含单独代理项(lone surrogates)的,它返回一个布尔值来指示字符串是否包含这种情况。单独代理项是指由代理项对(surrogate pair)中的一个码元组成的字符串。

这个方法通常用于检查字符串是否有效,特别是当涉及到处理 Unicode 字符时。如果字符串包含了单独代理项,那么它可能不是一个有效的 Unicode 字符串。

以下是 isWellFormed() 方法的语法:

javascript 复制代码
string.isWellFormed()
  • string: 要检查的字符串。

isWellFormed() 方法返回一个布尔值,如果字符串中不包含单独代理项,则返回 true,否则返回 false

示例:

javascript 复制代码
const validString = "Hello, 世界!"; // 一个有效的字符串
const invalidString = "Hello, \uD800!"; // 包含单独代理项的字符串

console.log(validString.isWellFormed()); // 输出 true
console.log(invalidString.isWellFormed()); // 输出 false

在上面的示例中,validString 是一个有效的字符串,它不包含单独代理项,因此 isWellFormed() 返回 true。而 invalidString 包含了一个单独代理项 \uD800,所以 isWellFormed() 返回 false。这个方法有助于确保字符串在处理 Unicode 字符时是有效的。

33. normalize()

normalize() 方法用于返回字符串的 Unicode 标准化形式。Unicode标准化是一种处理字符编码的方式,通常用于处理特定字符的不同表现形式,例如重音符号的组合。

该方法接受一个可选的参数,用于指定标准化的形式,常见的有四个选项:

  1. "NFC": 默认值,以标准等价形式标准化字符串。
  2. "NFD": 以分解形式标准化字符串,可以将组合字符分解为基字符和重音符号等组件。
  3. "NFKC": 以兼容等价形式标准化字符串,会将一些特殊字符替换为普通字符。
  4. "NFKD": 以兼容等价形式标准化字符串,也会分解组合字符。

下面是一个示例:

javascript 复制代码
const text = "café";

// 使用 NFC 标准化
const normalizedNFC = text.normalize("NFC");
console.log(normalizedNFC); // "café"

// 使用 NFD 标准化
const normalizedNFD = text.normalize("NFD");
console.log(normalizedNFD); // "café"

在上面的示例中,我们首先有一个包含重音符号 "é" 的字符串 "café"。然后,我们使用 normalize() 方法来分别以 NFC 和 NFD 标准化字符串。NFC 标准化保留了 "é" 作为一个字符,而 NFD 标准化将其分解为 "e" 和 "́"。

这种标准化在处理文本搜索、排序和比较时非常有用,因为它可以确保不同表示形式的字符被正确处理。在多语言环境中,尤其需要注意字符标准化。

34. valueOf()

valueOf() 方法是 JavaScript 字符串对象的一个方法,用于返回该字符串对象的原始字符串值。

在 JavaScript 中,字符串对象和字符串原始值之间有一个重要的区别。字符串对象是字符串值的包装器,允许您调用各种字符串相关的方法。而字符串原始值是不可变的,通常以单引号或双引号括起来。使用 valueOf() 方法,可以获取字符串对象的原始字符串值。

下面是一个示例:

javascript 复制代码
const strObject = new String("Hello, World!"); // 创建一个字符串对象
const strValue = strObject.valueOf(); // 获取字符串对象的原始值

console.log(strValue); // 输出 "Hello, World!"

在上面的示例中,我们首先创建了一个字符串对象 strObject,然后使用 valueOf() 方法获取它的原始字符串值 strValue,最终输出原始字符串值。

通常情况下,其实我们不太需要显式使用 valueOf() 方法,因为 JavaScript 在需要字符串值时通常会自动提取。可以说实际是没啥用,但是了解这个方法对于理解字符串对象和原始值之间的差异很有帮助的~

35. toString()

toString() 方法是 JavaScript 字符串对象的一个方法,用于返回该字符串对象的字符串值。

在 JavaScript 中,字符串对象和字符串原始值之间有一个重要的区别。字符串对象是字符串值的包装器,允许您调用各种字符串相关的方法。而字符串原始值是不可变的,通常以单引号或双引号括起来。使用 toString() 方法,您可以获取字符串对象的字符串值。

下面是一个示例:

javascript 复制代码
const strObject = new String("Hello, World!"); // 创建一个字符串对象
const strValue = strObject.toString(); // 获取字符串对象的字符串值

console.log(strValue); // 输出 "Hello, World!"

在上面的示例中,我们首先创建了一个字符串对象 strObject,然后使用 toString() 方法获取它的字符串值 strValue,最终输出字符串值。

其实在你看下来之后你会发现,诶?这不和valueOf()一样嘛,确实,它们俩又是两兄弟~ 还是那句话,这个我也没明白搞出两个的区别和作用在哪~ 欢迎大佬答疑~

36. toWellFormed()

JavaScript 中的字符串是 UTF-16 编码的。UTF-16 编码中有代理对的概念toWellFormed()

toWellFormed() 方法返回一个字符串,其中该字符串的所有单独代理项都被替换为 Unicode 替换字符 U+FFFD。

语法:

scss 复制代码
toWellFormed()

JavaScript 中的字符串是 UTF-16 编码的。UTF-16 编码中有代理对 的概念toWellFormed() 迭代字符串的码元,并将任何单独代理项替换为 Unicode 替换字符 U+FFFD 。这确保了返回的字符串格式正确并可用于期望正确格式字符串的函数,比如 encodeURI。由于引擎能够直接访问字符串的内部表示,与自定义实现相比 toWellFormed() 更高效。

当在某些上下文中使用格式不正确的字符串时,例如 TextEncoder,它们会自动转换为使用相同替换字符的格式正确的字符串。当单独代理项被呈现时,它们也会呈现为替换字符(一个带有问号的钻石形状)。

示例:

javascript 复制代码
const strings = [
  // 单独的前导代理
  "ab\uD800",
  "ab\uD800c",
  // 单独的后尾代理
  "\uDFFFab",
  "c\uDFFFab",
  // 格式正确
  "abc",
  "ab\uD83D\uDE04c",
];

for (const str of strings) {
  console.log(str.toWellFormed());
}
// Logs:
// "ab�"
// "ab�c"
// "�ab"
// "c�ab"
// "abc"
// "ab😄c"

它可以被用避免encodeURI() 错误,如果传递的字符串格式不正确,encodeURI 会抛出错误。可以先通过使用 toWellFormed() 将字符串转换为格式正确的字符串来避免。

总结

截止到刚刚我参考了MDN的JavaScript文档统计了一下,除去一些已弃用的方法我在文章内没有标注,其它的我都汇总到了文章之中。

大家可以看一看是否有哪些方法从来就没有使用过吧,其实有很多方法也许我们永远也用不上,但是我们也可以来相对简单的了解一下,看看哪些"阴间"方法是我们没见过的~

在写这篇文章中我也有很多不知道的地方,希望大佬看到了一些不对的地方可以指出来,让我们一起共同学习吧~

如果你想了解更多这类文章,点赞关注作者更新更多后续~

相关推荐
鑫~阳1 小时前
html + css 淘宝网实战
前端·css·html
Catherinemin1 小时前
CSS|14 z-index
前端·css
心软小念2 小时前
外包干了27天,技术退步明显。。。。。
软件测试·面试
2401_882727573 小时前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder3 小时前
CSS系列(36)-- Containment详解
前端·css
anyup_前端梦工厂3 小时前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js
5hand3 小时前
Element-ui的使用教程 基于HBuilder X
前端·javascript·vue.js·elementui
GDAL4 小时前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿4 小时前
react防止页面崩溃
前端·react.js·前端框架
z千鑫4 小时前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js