【JS】JS基础--字符串方法整理

JavaScript 字符串方法的全面总结。字符串的所有方法都不会改变原字符串（因为字符串是原始的、不可变的值），它们总是返回一个新的字符串或其他值。

一、 获取字符串信息 (Information Methods)

这些方法用于从字符串中提取信息或进行判断。

1. length (属性，非方法)

   • 作用：返回字符串的长度。

   • 示例：

     let str = "Hello";
     console.log(str.length); // 5
     

2. charAt()

   • 作用：返回指定索引位置的字符。

   • 参数：index (索引，从0开始)。

   • 返回值：指定位置的字符。如果索引超出范围，则返回空字符串 ''。

   • 示例：

     let str = "Hello";
     console.log(str.charAt(1)); // 'e'
     console.log(str.charAt(10)); // ''
     

3. charCodeAt()

   • 作用：返回指定索引位置字符的 UTF-16 代码单元值（一个介于 0 到 65535 之间的整数）。

   • 参数：index。

   • 返回值：表示字符编码的数字。如果索引超出范围，则返回 NaN。

   • 示例：

     let str = "Hello";
     console.log(str.charCodeAt(1)); // 101 (小写字母'e'的Unicode码)
     

4. codePointAt() (ES6)

   • 作用：返回一个 Unicode 编码点值的非负整数。能正确处理 UTF-16 中需要两个码元表示的字符（如某些表情符号）。

   • 参数：index。

   • 返回值：一个数字，表示代码点的值。

   • 示例：

     console.log('😊'.codePointAt(0)); // 128522
     console.log('𝒞'.codePointAt(0)); // 119966
     

5. includes() (ES6)

   • 作用：判断一个字符串是否包含在另一个字符串中。

   • 参数：searchString (要搜索的字符串), position (从哪个索引位置开始搜索，可选)。

   • 返回值：布尔值 (true 或 false)。

   • 示例：

     let str = "Hello world";
     console.log(str.includes("world")); // true
     console.log(str.includes("World")); // false (区分大小写)
     console.log(str.includes("Hello", 1)); // false (从索引1开始找不到"Hello")
     

6. startsWith() (ES6)

   • 作用：判断当前字符串是否以指定的子字符串开头。

   • 参数：searchString，position (可选，默认为0)。

   • 返回值：布尔值。

   • 示例：

     let str = "Hello world";
     console.log(str.startsWith("Hello")); // true
     console.log(str.startsWith("world", 6)); // true (从索引6开始，字符串是"world"，它以"world"开头)
     

7. endsWith() (ES6)

   • 作用：判断当前字符串是否以指定的子字符串结尾。

   • 参数：searchString，length (可选，作为字符串的长度。默认值为原字符串长度)。

   • 返回值：布尔值。

   • 示例：

     let str = "Hello world";
     console.log(str.endsWith("world")); // true
     console.log(str.endsWith("Hello", 5)); // true (将前5个字符"Hello"视为整个字符串，它以"Hello"结尾)
     

8. indexOf()

   • 作用：返回调用它的 String 对象中第一次出现的指定值的索引。

   • 参数：searchValue (要查找的子字符串), fromIndex (开始查找的位置，可选)。

   • 返回值：首次出现的索引，如果未找到则返回 -1。

   • 示例：

     let str = "Hello world, welcome to the world.";
     console.log(str.indexOf("world")); // 6
     console.log(str.indexOf("world", 7)); // 23 (从索引7开始找)
     console.log(str.indexOf("Planet")); // -1
     

9. lastIndexOf()

   • 作用：返回指定值在调用该方法的字符串中最后出现的位置。

   • 参数：同上。

   • 返回值：最后出现的索引，如果未找到则返回 -1。

   • 示例：

     let str = "Hello world, welcome to the world.";
     console.log(str.lastIndexOf("world")); // 23
     console.log(str.lastIndexOf("world", 22)); // 6 (在索引0-22范围内最后出现的位置)
     

---

二、 操作字符串内容 (Content Manipulation)

这些方法用于创建新的、修改后的字符串。

1. concat()

   • 作用：将一个或多个字符串与原字符串连接合并，形成一个新的字符串。

   • 参数：str1, str2, ..., strN (多个要连接的字符串)。

   • 返回值：一个新的连接后的字符串。

   • 示例：

     let str1 = "Hello";
     let str2 = " ";
     let str3 = "World";
     let newStr = str1.concat(str2, str3);
     console.log(newStr); // "Hello World"
     // 通常更推荐使用 + 或 模板字符串
     console.log(str1 + str2 + str3); // "Hello World"
     

2. slice()

   • 作用：提取某个字符串的一部分，并返回一个新的字符串。

   • 参数：beginIndex (开始索引), endIndex (结束索引，不包括该索引的字符，可选)。

   • 返回值：一个新的提取出的字符串。

   • 示例：

     let str = "Hello world";
     console.log(str.slice(1, 4)); // "ell" (索引1到4，不包括4)
     console.log(str.slice(6)); // "world" (从索引6到末尾)
     console.log(str.slice(-5, -1)); // "worl" (负数表示从末尾开始倒数)
     

3. substring()

   • 作用：返回一个字符串在开始索引到结束索引之间的一个子集。

   • 参数：indexStart, indexEnd (可选)。

   • 与 slice() 的区别：substring() 的参数如果为负数或 NaN 会被当作 0，且会自动交换参数使小的作为起始索引。

   • 示例：

     let str = "Hello world";
     console.log(str.substring(1, 4)); // "ell"
     console.log(str.substring(4, 1)); // "ell" (自动交换了参数)
     console.log(str.substring(-3, 4)); // "Hell" (-3被当作0)
     

4. substr() (已弃用 Legacy)

   • 注意：这是一个遗留函数，不再推荐使用。请使用 slice() 或 substring() 代替。
   • 作用：返回一个字符串中从指定位置开始到指定字符数的字符。
   • 参数：start, length (要提取的字符数，可选)。

5. repeat() (ES6)

   • 作用：构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。

   • 参数：count (重复次数，0到无穷之间的整数)。

   • 返回值：新的重复后的字符串。

   • 示例：

     let str = "Ha";
     console.log(str.repeat(3)); // "HaHaHa"
     console.log("abc".repeat(2)); // "abcabc"
     console.log("hi".repeat(0)); // ""
     

6. padStart() (ES2017)

   • 作用：用另一个字符串填充当前字符串（如果需要的话，会重复填充），直到达到给定的长度。从当前字符串的开头开始填充。

   • 参数：targetLength (目标长度), padString (填充字符串，默认为空格 " ")。

   • 返回值：填充后的新字符串。

   • 示例：

     let str = "5";
     console.log(str.padStart(3, '0')); // "005" (常用于数字补零)
     console.log("abc".padStart(10, "123")); // "1231231abc"
     

7. padEnd() (ES2017)

   • 作用：从当前字符串的末尾开始填充。

   • 参数：同上。

   • 返回值：填充后的新字符串。

   • 示例：

     let str = "5";
     console.log(str.padEnd(3, '0')); // "500"
     console.log("abc".padEnd(10, "xyz")); // "abcxyzxyzx"
     

8. trim() (ES5)

   • 作用：从字符串的两端删除空白字符（空格、制表符、换行符等）。

   • 返回值：一个新的去除了两端空白字符的字符串。

   • 示例：

     let str = "   Hello world!   ";
     console.log(str.trim()); // "Hello world!"
     

9. trimStart() / trimLeft() (ES2019)

   • 作用：从字符串的开头删除空白字符。

   • 返回值：新的字符串。

   • 示例：

     let str = "   Hello world!   ";
     console.log(str.trimStart()); // "Hello world!   "
     

10. trimEnd() / trimRight() (ES2019)

    • 作用：从字符串的末尾删除空白字符。

    • 返回值：新的字符串。

    • 示例：

      let str = "   Hello world!   ";
      console.log(str.trimEnd()); // "   Hello world!"
      

---

三、 字符串转换和匹配 (Conversion and Matching)

1. toLowerCase()

   • 作用：将调用该方法的字符串值转为小写形式。

   • 返回值：新的小写字符串。

   • 示例：

     let str = "Hello World";
     console.log(str.toLowerCase()); // "hello world"
     

2. toUpperCase()

   • 作用：将调用该方法的字符串值转为大写形式。

   • 返回值：新的大写字符串。

   • 示例：

     let str = "Hello World";
     console.log(str.toUpperCase()); // "HELLO WORLD"
     

3. toString()

   • 作用：返回指定对象的字符串形式（对字符串调用返回字符串本身）。

   • 返回值：字符串表示。

   • 示例：

     let str = new String("Hello"); // String 对象
     console.log(str.toString()); // "Hello" (字符串原始值)
     console.log(typeof str.toString()); // "string"
     

4. valueOf()

   • 作用：返回 String 对象的原始值（ primitive value ）。

   • 返回值：字符串原始值。

   • 示例：

     let strObj = new String("Hello");
     console.log(strObj.valueOf()); // "Hello"
     console.log(typeof strObj.valueOf()); // "string"
     

5. match()

   • 作用：检索返回一个字符串匹配正则表达式的结果。

   • 参数：regexp (一个正则表达式对象。如果传入一个非正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp)。

   • 返回值：一个数组（包含匹配结果信息），如果没匹配到则返回 null。

   • 示例：

     let str = "The rain in SPAIN stays mainly in the plain";
     let result = str.match(/ain/gi); // 全局、忽略大小写匹配"ain"
     console.log(result); // ['ain', 'AIN', 'ain', 'ain']
     

6. matchAll() (ES2020)

   • 作用：返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

   • 参数：regexp (必须是设置了全局模式 g 的正则表达式，否则会报错)。

   • 返回值：一个迭代器（iterator）。

   • 示例：

     let str = "test1test2";
     let regexp = /t(e)(st(\d?))/g;
     for (let match of str.matchAll(regexp)) {
       console.log(match);
     }
     // 第一次迭代输出: ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', groups: undefined]
     // 第二次迭代输出: ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', groups: undefined]
     

7. search()

   • 作用：执行正则表达式和字符串之间的搜索匹配。

   • 参数：regexp。

   • 返回值：如果匹配成功，则返回正则表达式在字符串中首次匹配项的索引；否则，返回 -1。

   • 示例：

     let str = "Hello world!";
     console.log(str.search(/world/)); // 6
     console.log(str.search(/Planet/)); // -1
     

8. replace()

   • 作用：返回一个由替换值替换部分或所有匹配模式后的新字符串。

   • 参数：pattern (可以是字符串或正则表达式), replacement (可以是字符串或一个函数)。

   • 返回值：新的部分或全部被替换的字符串。

   • 示例：

     let str = "Hello World";
     let newStr = str.replace("World", "JavaScript");
     console.log(newStr); // "Hello JavaScript"
     
     // 使用正则表达式进行全局替换
     let str2 = "Apples are round, and apples are juicy.";
     let newStr2 = str2.replace(/apples/gi, "oranges");
     console.log(newStr2); // "oranges are round, and oranges are juicy."
     

9. replaceAll() (ES2021)

   • 作用：返回一个新字符串，该字符串中所有匹配 pattern 的部分都被 replacement 替换。

   • 参数：同上。如果 pattern 是字符串，则会替换所有出现的该字符串（replace() 只会替换第一个）。

   • 返回值：新的全部被替换的字符串。

   • 示例：

     let str = "a-b-c";
     console.log(str.replaceAll('-', '.')); // "a.b.c"
     // 使用replace()需要正则表达式才能实现全局替换
     console.log(str.replace(/-/g, '.')); // "a.b.c"
     

10. split()

    • 作用：使用指定的分隔符字符串将一个 String 对象分割成子字符串数组。

    • 参数：separator (分隔符), limit (限制返回数组的最大长度，可选)。

    • 返回值：一个字符串数组。

    • 示例：

      let str = "The quick brown fox";
      console.log(str.split(' ')); // ['The', 'quick', 'brown', 'fox']
      console.log(str.split(' ', 2)); // ['The', 'quick'] (只取前2个)
      
      let csv = "John,Doe,30";
      console.log(csv.split(',')); // ['John', 'Doe', '30']
      
      console.log("Hello".split('')); // ['H', 'e', 'l', 'l', 'o'] (分割成字符数组)
      

11. localeCompare()

    • 作用：返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。

    • 参数：compareString (用来比较的字符串), locales, options (可选，用于指定语言环境和比较选项)。

    • 返回值：

      • 负数 (-1)：如果参考字符串在排序顺序中位于比较字符串之前。
      • 正数 (1)：如果参考字符串在排序顺序中位于比较字符串之后。
      • 0：如果两个字符串相等。

    • 示例：

      console.log('a'.localeCompare('b')); // -1 (a在b之前)
      console.log('b'.localeCompare('a')); // 1 (b在a之后)
      console.log('a'.localeCompare('a')); // 0
      console.log('check'.localeCompare('against')); // 1 (按字母表，'c'在'a'之后)
      

总结表格

方法	作用描述	返回值
length	获取字符串长度	数字
charAt()	获取指定索引字符	字符串
charCodeAt()	获取字符的UTF-16编码	数字
codePointAt()	获取字符的Unicode码点	数字
includes()	判断是否包含子串	布尔值
startsWith()	判断是否以子串开头	布尔值
endsWith()	判断是否以子串结尾	布尔值
indexOf()	查找子串首次出现的索引	数字（索引/-1）
lastIndexOf()	查找子串最后一次出现的索引	数字（索引/-1）
concat()	连接字符串	新字符串
slice()	提取子串	新字符串
substring()	提取子串（处理负参数不同）	新字符串
repeat()	重复字符串	新字符串
padStart()	在开头填充字符串	新字符串
padEnd()	在末尾填充字符串	新字符串
trim()	去除两端空白	新字符串
trimStart()	去除开头空白	新字符串
trimEnd()	去除末尾空白	新字符串
toLowerCase()	转为小写	新字符串
toUpperCase()	转为大写	新字符串
toString()	返回字符串原始值	字符串
valueOf()	返回字符串原始值	字符串
match()	匹配正则表达式	数组 / null
matchAll()	匹配所有正则表达式结果	迭代器
search()	搜索正则表达式匹配位置	数字（索引/-1）
replace()	替换匹配的子串	新字符串
replaceAll()	替换所有匹配的子串	新字符串
split()	分割字符串成数组	数组
localeCompare()	比较字符串的排序顺序	数字（-1, 0, 1）