JavaScript String 原始值包装类型及核心方法详解
本文系统梳理 JavaScript 中 String 原始值包装类型的特性与常用方法。内容涵盖字符串规范化 normalize、拼接 concat、子串提取 slice/substr/substring、位置查找 indexOf/lastIndexOf、包含判断 startsWith/endsWith/includes、去空格 trim、重复 repeat、填充 padStart/padEnd、迭代解构、大小写转换及模式匹配 match/search/replace/split 和 localeCompare。通过具体示例解析各方法的参数行为、边界情况及注意事项，帮助开发者高效处理字符串操作。
String 原始值包装类型
String 是字符串对应的引用类型。创建 String 对象时，需使用 String 构造函数并传入一个字符串值。
let stringObject = new String("hello world");所有字符串原始值均可调用 String 对象的方法。其中 valueOf、toLocaleString 和 toString 三个继承方法均返回对象的原始字符串值。每个 String 对象都包含一个 length 属性，用于表示字符串中的字符数量。
let stringValue = "hello world";
console.log(stringValue.length);// "11"String 类型提供了丰富的方法来解析和操作字符串，例如字符串截取函数 slice()、substr()、substring()，字符串连接函数 concat()，查询字符串位置的 indexOf() 和 lastIndexOf()，以及字符串大小写转换函数 toLowerCase()、toLocaleLowerCase()、toUpperCase() 和 toLocaleUpperCase() 等。本文将对几乎所有的字符串方法进行总结梳理，以便后用。
String 原始值包装类型操作方法
1. 字符串编码常规化函数 normalize() 方法
某些 Unicode 字符存在多种编码方式。有的字符可以通过一个 BMP 字符表示，也可以通过一个代理对表示。
//U+00C5 上面带圆圈的大写拉丁字母A
console.log(String.fromCharCode(0x00C5)); //Å
//U+212B：长度单位 “埃”
console.log(String.fromCharCode(0x212B));// Å
//U+004 大写拉丁字母A
//U+030A： 上面加个圆圈
console.log(String.fromCharCode(0x0041,0x030A)); // Å由于比较操作符关注的是字符的编码值而非视觉外观，因此上述几种不同编码但视觉上相同的字符互不相等。
let a1 = String.fromCharCode(0x00C5),
a2 = String.fromCharCode(0x212B),
a3 = String.fromCharCode(0x0041,0x030A);
console.log(a1,a2,a3); // Å,Å,Å
console.log(a1 === a2);//false
console.log(a2 === a3);//false
console.log(a1 === a3);//false为解决此问题，Unicode 提供了 4 种规范化形式，可将上述字符统一为一致的格式，无论底层字符代码如何。这 4 种规范化形式分别为：NFD、NFC、NFKD 和 NFKC。可以使用 normalize() 方法对字符串应用上述规范化形式，使用时需传入表示具体形式的字符串参数："NFD"、"NFC"、"NFKD" 或 "NFKC"。
通过比较字符串与其调用 normalize() 的返回值，即可判断该字符串是否已经规范化。
let a1 = String.fromCharCode(0x00C5),
a2 = String.fromCharCode(0x212B),
a3 = String.fromCharCode(0x0041,0x030A);
// U+00C5 是对0+212B 进行NFC/NFKC 规范化之后的结果
console.log(a1 === a1.normalize("NFD")); // false
console.log(a1 === a1.normalize("NFC"));//true
console.log(a1 === a1.normalize("NFKD"));// false
console.log(a1 === a1.normalize("NFKC"));//true
//U+212B 是未规范化的
console.log(a2 === a2.normalize("NFD")); // false
console.log(a2 === a2.normalize("NFC"));//false
console.log(a2 === a2.normalize("NFKD"));// false
console.log(a2 === a2.normalize("NFKC"));//false
//U+0041/U+030A 是对0+212B 进行NFD/NFKD 规范化之后的结果
console.log(a3 === a3.normalize("NFD")); // true
console.log(a3 === a3.normalize("NFC"));//false
console.log(a3 === a3.normalize("NFKD"));// true
console.log(a3 === a3.normalize("NFKC"));//false选择同一种规范化形式，可使比较操作符返回正确的结果。
let a1 = String.fromCharCode(0x00C5),
a2 = String.fromCharCode(0x212B),
a3 = String.fromCharCode(0x0041,0x030A);
console.log(a1.normalize("NFD") === a1.normalize("NFD")); // false
console.log(a2.normalize("NFKC") === a2.normalize("NFKC"));//false
console.log(a3.normalize("NFC") === a3.normalize("NFC"));// false2. 字符串拼接函数 concat()
concat() 用于将一个或多个字符串拼接成一个新的字符串。
let stringValue = "hello";
let result = stringValue.concat("world");
console.log(result);// hello world
console.log(stringValue);// hello stringValue 调用 concat() 方法返回的结果为 "hello world"，但 stringValue 本身的值保持不变。concat() 方法可以接受任意多个参数，因此可以一次性拼接多个字符串。
let stringValue = "hello ";
let result = stringValue.concat("world","!");
console.log(result);// "hello world!"
console.log(stringValue); // "hello "3. 字符串提取子字符串方法：slice()、substr()、substring()
slice()、substr() 和 substring() 这三个方法均返回字符串的一个子字符串，且都接收一个或两个参数。
第一个参数表示子字符串开始的位置，第二个参数表示子字符串结束的位置。
对于 slice() 和 substring() 而言，第二个参数指定提取结束的位置（即该位置之前的字符会被提取出来）。
对于 substr() 而言，第二个参数表示返回的子字符串的字符数量。
在任何情况下，省略第二个参数都意味着提取到字符串末尾。
与 concat() 方法一样，slice()、substr() 和 substring() 也不会修改调用它们的原始字符串。
let stringValue = "hello world";
// 传递一个参数，相当于提取到字符串末尾
console.log(stringValue.slice(3)); //"lo world"
console.log(stringValue.substr(3)); //"lo world"
console.log(stringValue.substring(3); //"lo world"
// 传递2个参数，slice(),substring()结果一致，substr() 结果与前两者有区别
console.log(stringValue.slice(3,7)); //"lo w"
console.log(stringValue.substr(3,7)); //"lo w"
console.log(stringValue.substring(3,7); //"lo worl"当传递给 slice()、substring()、substr() 的参数为负数时，这三个函数的行为有所不同。slice() 方法将所有负数参数都视为字符串长度加上参数值。
substring() 方法将所有负参数值都转换为 0。
substr() 方法将第一个负参数值视为字符串长度加上该值，将第二个负参数值转换为 0。
let stringValue = "hello world";
console.log(stringValue.slice(-3));// "rld"
console.log(stringValue.substring(-3));//"hello world"
console.log(stringValue.subst(-3));//"rld"
console.log(stringValue.slice(3,-4));// "lo w" 转化为 （3，-4 + 11） = （3，7）
console.log(stringValue.substring(3，-4));//"hel"，转化为（3，0），这个函数会将较小的参数作为起点，较大的参数作为终点，所以相当于（0，3）
console.log(stringValue.substr(3,-4));//"" 转化为(3,0)4. 字符串位置方法 indexOf()、lastIndexOf()
有两个方法用于在字符串中定位子字符串：indexOf() 和 lastIndexOf()。这两个方法在字符串中搜索传入的字符串，并返回其位置（如果没找到，则返回 -1）。
两者的区别在于，indexOf() 从字符串开头开始查找子字符串，而 lastIndexOf() 方法从字符串末尾开始查找子字符串。
let stringValue = "hello world";
console.log(stringValue.indexOf("o");//4
console.log(stringValue.lastIndexOf("o"));// 7 这两个方法都可以接收第二个参数，表示开始搜索的位置。这意味着，indexOf() 会从这个参数指定的位置开始向字符串末尾搜索，忽略位置之前的字符；lastIndexOf() 则会从这个参数指定的位置开始向字符串开头搜索，忽略该位置之后直到字符串末尾的字符。
需要注意的是，返回值的位置永远是搜索的子字符串在搜索字符串中的正序位置，不会因为第二个参数而改变。并且传入的搜索的范围包含第二个参数传递的位置。
let stringValue = "hello world";
console.log(stringValue.indexOf("o",7));// 7
console.log(stringValue.lastIndexOf("o",7));//75. 字符串包含方法：startsWith()、endsWith() 和 includes()
ECMAScript 6 增加了 3 个用于判断字符串是否包含另一个字符串的方法：startsWith()、endsWith() 和 includes()。这些方法都会从字符串中搜索传入的字符串，并返回一个是否包含的布尔值。区别在于，startsWith() 检查开始于索引 0 的匹配项，endsWith() 检查开始于索引 (string.length - substring.length()) 的匹配项，而 includes() 检查整个字符串。
let message = "foobarbaz";
console.log(message.startsWith("foo"));//true
console.log(message.endsWith("bar"));//false
console.log(message.endsWith("baz"));//true
console.log(message.startsWith("bar"));//false
console.log(message.includes("foo"));//true
console.log(message.includes("qux"));//falsestartsWith() 和 includes() 方法接收可选的第二个参数，表示开始搜索的位置。如果传入第二个参数，则意味着这两个方法会从指定位置向着字符串末尾搜索，忽略位置之前的所有字符。
let message = "foobarbaz";
console.log(message.startsWith("foo"));//true
console.log(message.startsWith("foo",1));//false
console.log(message.includes("bar"));//true
console.log(message.includes("bar",4));//falseendsWith() 方法接收可选的第二个参数，表示把传入的第二个参数作为字符串结尾的位置。如果不提供这个参数，那么默认就是字符串长度。如果提供了这个参数，那么就好像字符串只有那么多字符一样。
let message = "foobarbaz";
console.log(message.endsWith("bar"));//false
console.log(message.endsWith("bar",6));//true6. 去除字符串前后空格的方法 trim()、trimLeft()、trimRight()
ECMAScript 在所有字符串上提供了 trim() 方法。这个方法会创建字符串的一个副本，删除前后的所有空格，再返回结果。trimLeft() 和 trimRight() 方法分别从字符串开始和末尾清理空格符。
let stringValue = " hello world ";
let trimmedStringValue = stringValue.trim();
console.log(stringValue); // " hello world "
console.log(trimmedStringValue);//"hello world"
console.log(stringValue.trimLeft());//"hello world "
console.log(stringValue,trimRight());//" hello world"7. 字符串的重复复制 repeat()
ECMAScript 在所有字符串上都提供了 repeat() 方法。这个方法接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果。
let stringValue = "na ";
console.log(stringValue.repeat(3) + "batman"); // na na na batman8. 字符串填充函数 padStart() 和 padEnd() 方法
padStart() 方法和 padEnd() 方法会复制字符串，如果小于指定长度，则在相应一边填充字符，直至满足长度条件。这两个方法的第一个参数是长度，第二个参数是可选的填充字符串，默认为空字符串 (U+0020)。
let stringValue = "foo";
console.log(stringValue.padStart(6)); // " foo"
console.log(stringValue.padStart(9,"."));// "......foo"
console.log(stringValue.padEnd(6));//"foo ";
console.log(stringValue.padEnd(9,"."));//"foo......"可选的第二个参数并不局限于一个字符。如果提供了多个字符的字符串，则会将其拼接并截断以匹配指定长度。此外，如果长度小于或等于字符串长度，则会返回原始字符串。
传入的第二个参数表示的是字符串的总长度。
let stringValue = "foo";
console.log(stringValue.padStart(8,"bar"));//"barbafoo"
console.log(stringValue.padEnd(8,"bar"));//"foobarba"
console.log(stringValue.padEnd(2));// "foo"9. 字符串迭代与解构
字符串的原型上暴露了一个 @@iterator 方法，表示可以迭代字符串的每个字符。可以手动调用迭代器。
let message = "abc";
let stringIterator = message[Symbol.iteator]();
console.log(stringIterator.next());// {value:"a",done:false}
console.log(stringIterator.next());//{value:"b",done:false}
console.log(stringIterator.next());//{value:"c",done:false}
console.log(stringIterator.next());//{value:undefiend,done:true}在 for 循环中可以通过这个迭代器按序访问每个字符。
for (const c of "abc") {
console.log(c);
}
// a
//b
//c有了这个迭代器之后，字符串就可以通过解构操作符来解构了。比如，可以方便地把字符串分割为数组。
let message = "abcde";
console.log([...message]);// ["a","b","c","d","e"]10. 字符串大小写转换
字符串大小写转换函数涉及 4 个方法：toLowerCase()、toLocaleLowerCase()、toUpperCase() 和 toLocaleUpperCase()。toLowerCase() 和 toUpperCase() 方法是原来就有的方法，与 java.lang.String 中的方法同名。toLocaleLowerCase() 和 toLocaleUpperCase() 方法旨在基于特定地区实现。在很多地区，地区的方法与通用的方法是一样的。但在少数语言中（如土耳其语），Unicode 大小写转换需应用特殊规则，要使用地区特定的方法才能实现转换。
let stringValue = "hello world";
console.log(stringValue.toUpperCase());//"HELLO WORLD"
console.log(stringValue.toLocaleUpperCase());//"HELLO WORLD"
console.log(stringValue.toLocaleLowerCase());//"hello world"
console.log(stringValue.toLowerCase());// "hello world"11. 字符串模式匹配方法 match()、search()、replace()、split()
match()
String 类型专门为字符串中实现模式匹配设计了几个方法。第一个就是 match() 方法，这个方法本质上跟 RegExp 对象的 exec() 方法相同。match() 方法接收一个参数，可以是一个正则表达式字符串，也可以是一个 RegExp 对象。
let text = "cat, bat, sat, fat";
let pattern = /.at/;
//等价于pattern.exec(text)
let matches = text.match(pattern);
console.log(matches.index);//0
console.log(matches[0]);// "cat"
console.log(pattern.lastIndex);// 0search()
另一个查找模式的字符串方法是 search()。这个方法唯一的参数与 match() 方法一样：正则表达式或 RegExp 对象。这个方法返回模式第一个匹配的位置索引，如果没有找到返回 -1。search() 始终从字符串开头向后匹配模式。
let text = "cat, bat, sat, fat";
let pos = text.search(/at/);
console.log(pos);//1replace()
为简化字符串替换操作，ECMAScript 提供了 replace() 方法。这个方法接收两个参数，第一个参数可以是一个 RegExp 对象或一个字符串（这个字符串不会转化为正则表达式），第二个参数可以是一个字符串或函数。如果第一个参数是字符串，那么只会替换第一个字符串，要想替换所有子字符串，第一个参数必须为正则表达式并且带全局标记。
let text = "cat, bat, sat, fat";
let result = text.replace("at","ond");
console.log(result);// "cond, bat, sat, fat"
result = text.replace(/at/g,"ond);
console.log(result);//"cond, bond, sond, fond"第二个参数是字符串的情况下，有几个特殊的字符序列，可以用来插入正则表达式操作的值。ECMAScript 262 规定了如下的值。
| 字符序列 | 替换文本 |
|---|---|
| $$ | $ |
| $& | 匹配整个模式的子字符串。与RegExp.lastMatch相同 |
| $' | 匹配的子字符串之前的字符串。与RegExp.rightContext 相同 |
| $` | 匹配的子字符串之后的字符串。与RegExp.leftContext 相同 |
| $n | 匹配第n个捕获组的字符串，其中n 是 0～9.比如，1 是匹配的第一个捕获组的字符串，1是匹配的第一个捕获组的字符串，2 是匹配的第二个捕获组的字符串，以此类推。如果没有捕获组，则值为空字符串 |
| $nn | 匹配第nn个捕获组字符串，其中nn 是01～99.比如，01 是匹配第一个捕获组的字符串，01是匹配第一个捕获组的字符串，02 是匹配第二个捕获组的字符串，以此类推。如果没有捕获组，则值为空字符串 |
使用这些特殊的序列，可以在替换文本中使用之前匹配的内容。
let text = "cat, bat, sat, fat";
result = text.replace(/(.at)/g,"word ($1)");
console.log(result); // word(cat), word(bat), word(sat), word(fat)replace() 第二个参数可以是一个函数。在只有一个匹配项时，这个函数会收到 3 个参数：与整个模式匹配的字符串，匹配项在字符串中的开始位置，以及整个字符串。在有多个捕获组的情况下，每个匹配捕获组的字符串也会作为参数传递这个函数，但最后两个参数还是与整个模式匹配的开始位置和原始字符串。这个函数应该返回一个字符串，表示应该把匹配项替换成什么。使用函数作为第二个参数可以更细致地控制替换过程。
function htmlEscape(text) {
return text.replace(/[<>"&]/g,function(match,pos,originalText){
switch(match) {
case "<":
return "<";
case ">":
return ">";
case "&":
return "&";
case "\"":
return """;
}
});
}
console.log(htmlEscape("<p class=\"greeting\">Hello world!<p>"));//<p class="greeting">Hello world!<p>split()
最后一个与模式匹配相关的字符串方法是 split()。这个方法会根据传入的分隔符将字符串拆分成数组。作为分隔符的参数可以是字符串，也可以是 RegExp 对象。（字符串分隔符不会被这个方法当成正则表达式。）还可以传入第二个参数，即数组大小，确保返回的数组不会超过指定大小。
let colorText = "red,blue,green,yellow";
let color1 = colorText.split(",");// ["red","blue","green","yellow"]
let color2 = colorText.split(",",2);//["red","blue"];
let colors = colorText.split(/[^,]/);// ["",",",",",",",""]12. localeCompare()
localeCompare() 方法比较两个字符串，返回如下 3 个值中的一个。
- 如果按照字母表顺序，字符串应该排在字符串参数前面，则返回负值。（通常是 -1，具体还要看实际值相关的实现。）
- 如果字符串与字符串参数相等，则返回 0。
- 如果按照字母表顺序，字符串应该排在字符串参数后面，则返回正值。（通常是 1，具体还要看与实际值相关的实现）。
let stringValue = "yellow";
console.log(stringValue.localeCompare("brick");//1
console.log(stringValue.localeCompare("yellow");// 0
console.log(stringValue.localeCompare("zoo");//-1因为返回的具体值可能因为具体实现而异，所以最好像下面方式一样使用 localeCompare()。
function detemineOrder(value){
let result = stringValue.localeCompare(value);
if(result < 0 ){
console.log(`The string 'yellow' comes before the string '${value}'.`);
}else if( result > 0) {
console.log(`The string 'yellow' comes after the string '${value}'.`);
}else {
console.log(`The string 'yellow' comes equal the string '${value}'.`);
}
}
detemineOrder("brick");
detemineOrder("yellow);
detemineOrder("zoo);到此这篇关于 JavaScript 引用类型之原始值包装类型 String 的文章就介绍到这了，更多相关 JS 包装类型 String 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00