JavaScript字符串方法

目录

indexOf

语法：

 示例:

lastIndexOf

语法：

示例: 

search

语法:

示例:

slice

语法:

 示例:

substring()

语法

示例

与 slice() 的区别

注意

substr()

语法

示例

与 substring() 和 slice() 的区别

结论

toUpperCase()

语法

示例

注意事项

toLowerCase()

语法

示例

注意事项

concat() 

语法

示例

注意事项

结论

String.trim()

语法

示例

注意事项

charAt() 

语法

返回值

示例

注意事项

charCodeAt()

语法：

示例

注意事项

---

indexOf

indexOf 是 JavaScript 中的一个常用方法，主要用于查找一个字符串（或数组）中某个元素（或子字符串）首次出现的位置。这个方法对于字符串和数组都是可用的，但使用方式和返回结果略有不同。当 indexOf 方法用于字符串时，它返回指定子字符串在字符串中首次出现的索引（位置），索引值从 0 开始计算。如果未找到子字符串，则返回 -1。

语法：

str.indexOf(searchValue[, fromIndex])

• searchValue：必需。规定需检索的字符串值。
• fromIndex（可选）：开始检索的位置。它的合法取值是 0 到字符串长度减一（包含）。如果省略该参数，则从字符串的开始处搜索。如果其值大于或等于字符串的长度，则意味着不会在字符串里检索，因此会返回 -1。

 示例:

var str = "Hello, world!";  
var index = str.indexOf("world");  
console.log(index); // 输出: 7  
  
var indexFrom = str.indexOf("world", 8); // 从索引 8 开始搜索  
console.log(indexFrom); // 输出: -1，因为从索引 8 开始没有找到 "world"

lastIndexOf

lastIndexOf 是 JavaScript 中的一个方法，与 indexOf 方法类似，但它用于查找一个字符串（或数组）中某个元素（或子字符串）最后一次出现的位置。这个方法同样适用于字符串和数组，但返回的是最后一次出现的索引，而不是第一次。当 lastIndexOf 方法用于字符串时，它返回指定子字符串在字符串中最后一次出现的索引（位置），索引值从 0 开始计算。如果未找到子字符串，则返回 -1。

语法：

str.lastIndexOf(searchValue[, fromIndex])

• searchValue：必需。规定需检索的字符串值。
• fromIndex（可选）：开始检索的位置。它的合法取值是 0 到字符串长度（包含）。如果省略该参数或其值大于或等于字符串的长度，则整个字符串会被搜索。如果其值为负数，则将其视为 0。但请注意，与 indexOf 不同的是，lastIndexOf 的 fromIndex 参数允许为负数，但实际效果等同于 0，因为字符串的索引不能是负数。然而，如果你希望从字符串的末尾开始向前搜索，你可以通过将 fromIndex 设置为字符串长度减一或更小的值来实现。

示例: 

var str = "Hello, world! World is great.";  
var index = str.lastIndexOf("world");  
console.log(index); // 输出: 7，因为 "world"（小写的）在索引 7 处首次出现  
  
var lastIndex = str.lastIndexOf("World");  
console.log(lastIndex); // 输出: 13，因为 "World"（大写的）在索引 13 处最后一次出现  
  
var fromIndex = str.lastIndexOf("World", 10); // 从索引 10 开始向前搜索  
console.log(fromIndex); // 输出: -1，因为在索引 10 之前的部分没有找到 "World"

search

在JavaScript中，search 方法主要用于字符串对象，它执行一个字符串匹配搜索，并返回第一个匹配项的索引。如果没有找到匹配项，则返回 -1。这个方法与正则表达式一起使用，以执行复杂的搜索操作。

语法:

str.search(regexp)

• str：需要搜索的字符串。
• regexp：一个正则表达式对象。如果传递一个非正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个正则表达式对象。

示例:

var str = "For more information, visit Mozilla Developer Network.";  
var n = str.search(/mozilla/i);  
console.log(n); // 输出: 23，因为 "Mozilla"（不区分大小写）在索引 23 处首次出现  
  
// 使用非正则表达式对象，但会被隐式转换为正则表达式  
var n2 = str.search("Mozilla"); // 注意：这里不会进行不区分大小写的搜索  
console.log(n2); // 输出: -1，因为没有找到完全匹配的 "Mozilla"（区分大小写）  
  
// 使用带有标志的正则表达式  
var n3 = str.search(/network/g); // 注意：'g' 标志在这里不会影响 search 方法的行为  
console.log(n3); // 输出: 38，因为 "network" 在索引 38 处首次出现

slice

slice 是 JavaScript 中的一个非常有用的方法，它用于提取字符串（或数组）的一部分，并返回一个新字符串（或数组），而不会修改原始字符串（或数组）。slice 方法可以接受一到两个参数，这两个参数指定了要返回的字符串（或数组）的起始和结束位置。

语法:

str.slice(beginIndex[, endIndex])

• beginIndex：必需。开始提取字符的索引（从该索引处开始的字符将被提取）。如果该值为负数，则表示从字符串的末尾开始算起的位置。例如，-1 表示字符串的最后一个字符。
• endIndex（可选）：在该索引处结束提取字符（但不包括该索引处的字符）。如果该索引被省略，或其值大于或等于字符串的长度，slice 会一直提取到字符串的末尾。如果它是负数，则表示从字符串的末尾开始算起的位置。

 示例:

var str = "Hello, world!";  
var newStr = str.slice(7, 12);  
console.log(newStr); // 输出: "world"  
  
// 使用负数索引  
var newStrWithNegative = str.slice(-6);  
console.log(newStrWithNegative); // 输出: "world!"  
  
// 结束索引大于字符串长度  
var newStrOverLength = str.slice(7, 20);  
console.log(newStrOverLength); // 输出: "world!"，因为它会提取到字符串的末尾

substring()

substring() 是 JavaScript 中的一个字符串方法，用于提取字符串中介于两个指定下标之间的字符。与 slice() 方法类似，substring() 也返回一个新字符串，不会修改原始字符串。然而，substring() 方法在处理负数索引时与 slice() 有所不同。

语法

str.substring(indexStart[, indexEnd])

• indexStart：必需。提取子字符串的起始位置（包括该位置的字符）。如果值为负数或大于字符串的长度，substring() 会将其当作 0 或字符串长度来处理。
• indexEnd（可选）：提取子字符串的结束位置（不包括该位置的字符）。如果省略该参数或其值大于字符串的长度，substring() 会提取到字符串的末尾。如果它是负数，则 substring() 会将其视为 0。

示例

var str = "Hello, world!";  
  
// 提取从索引 7 到索引 12 的字符（不包括索引 12 的字符）  
var newStr = str.substring(7, 12);  
console.log(newStr); // 输出: "world"  
  
// 省略结束索引，提取到字符串的末尾  
var newStrToEnd = str.substring(7);  
console.log(newStrToEnd); // 输出: "world!"  
  
// 使用负数索引（注意：负数索引会被当作 0 处理）  
var newStrWithNegative = str.substring(-6);  
console.log(newStrWithNegative); // 输出: "Hello, world!"，因为 -6 被当作 0 处理  
  
// 开始索引大于结束索引，`substring()` 会交换这两个索引  
var swappedIndices = str.substring(12, 7);  
console.log(swappedIndices); // 输出: "world"，因为索引被交换了

与 slice() 的区别

• 负数索引处理：substring() 会将负数索引视为 0 或字符串长度（取决于它是开始索引还是结束索引，以及字符串的长度）。而 slice() 允许负数索引，表示从字符串的末尾开始计算位置。
• 索引交换：如果 substring() 的 indexStart 大于 indexEnd，它会交换这两个索引，然后提取子字符串。而 slice() 会直接按照参数的顺序来提取子字符串，不会交换索引。

注意

• 如果 indexStart 等于 indexEnd，substring() 将返回一个空字符串。
• 如果省略 indexEnd，或者其值大于字符串的长度，substring() 会提取直到字符串末尾的子字符串。
• 原始字符串不会被 substring() 方法修改。

substr()

substr() 是 JavaScript 中的一个字符串方法，用于提取字符串的某个部分，并返回一个新字符串，而不会修改原始字符串。然而，需要注意的是，substr() 方法并不是 ECMAScript 标准的一部分，尽管许多 JavaScript 环境（包括所有主流浏览器）都支持它。由于这个原因，以及考虑到未来的兼容性和可移植性，推荐使用 substring() 或 slice() 方法来替代 substr()。

语法

str.substr(start[, length])

• start：必需。要提取的子字符串的起始位置（包括该位置的字符）。如果值为负数，则 substr() 会将它作为 0 来处理，并返回空字符串。
• length（可选）：要返回的字符数。如果省略该参数或其值大于字符串的剩余长度，则 substr() 会提取到字符串的末尾。

示例

var str = "Hello, world!";  
  
// 提取从索引 7 开始的 5 个字符  
var newStr = str.substr(7, 5);  
console.log(newStr); // 输出: "world"  
  
// 省略长度参数，提取到字符串的末尾  
var newStrToEnd = str.substr(7);  
console.log(newStrToEnd); // 输出: "world!"  
  
// 使用负数索引（注意：负数索引会被当作 0 处理）  
var newStrWithNegative = str.substr(-6);  
console.log(newStrWithNegative); // 输出: ""，因为 -6 被当作 0 处理  
  
// 提取的长度大于剩余长度  
var newStrLongerThanAvailable = str.substr(7, 100);  
console.log(newStrLongerThanAvailable); // 输出: "world!"，因为只提取到字符串的末尾

与 substring() 和 slice() 的区别

• 负数索引处理：substr() 会将负数索引视为 0。而 slice() 允许负数索引，表示从字符串的末尾开始计算位置。substring() 也会将负数索引视为 0 或字符串长度，具体取决于它是开始索引还是结束索引（但在实际使用中，由于它不会交换索引，所以通常只关心开始索引）。
• 索引交换：substring() 在遇到开始索引大于结束索引的情况时会交换这两个索引，而 substr() 和 slice() 不会。不过，对于 substr() 来说，这通常不是问题，因为它只关心起始位置和长度。
• 标准化：substr() 不是 ECMAScript 标准的一部分，因此在某些环境（如非浏览器环境或未来的 JavaScript 引擎）中可能不可用。而 substring() 和 slice() 是标准的字符串方法。

结论

由于 substr() 不是标准方法，并且其功能可以通过 substring() 或 slice() 来实现，因此建议避免使用 substr()，并改用 substring() 或 slice() 来保持代码的兼容性和可移植性。

toUpperCase()

toUpperCase() 是 JavaScript 中的一个字符串方法，用于将字符串中的所有小写字母转换为大写字母。该方法不会改变原始字符串，而是返回一个新的字符串，其中所有小写字母都被转换成了对应的大写字母。如果字符串中没有小写字母，则返回原始字符串的一个副本。

语法

str.toUpperCase()

• str 是要转换的字符串。

示例

var str = "Hello, World!";  
var upperStr = str.toUpperCase();  
  
console.log(upperStr); // 输出: "HELLO, WORLD!"  
console.log(str);      // 输出: "Hello, World!"，注意原始字符串没有改变

注意事项

• toUpperCase() 方法对字符串中的非字母字符（如数字、空格、标点符号等）没有影响。
• 该方法不区分字符的原始大小写。如果字符已经是大写，则保持不变。
• 对于包含非英文字符（如中文、日文等）的字符串，toUpperCase() 方法的行为可能因 JavaScript 引擎的实现而异。在大多数情况下，非英文字符不会被转换为大写，因为不同语言的大小写转换规则可能不同。然而，对于某些特殊字符（如土耳其语中的“i”与“İ”），JavaScript 的 toUpperCase() 方法可能会进行特殊处理。
• 需要注意的是，虽然 toUpperCase() 方法可以用于基本的字符串大小写转换，但在处理特定语言或区域设置时，可能需要使用更复杂的国际化库来确保正确的大小写转换。

toLowerCase()

toLowerCase() 是 JavaScript 中的一个字符串方法，用于将字符串中的所有大写字母转换为小写字母。与 toUpperCase() 方法类似，toLowerCase() 方法也不会改变原始字符串，而是返回一个新的字符串，其中所有大写字母都被转换成了对应的小写字母。如果字符串中没有大写字母，则返回原始字符串的一个副本。

语法

str.toLowerCase()

• str 是要转换的字符串。

示例

var str = "HELLO, WORLD!";  
var lowerStr = str.toLowerCase();  
  
console.log(lowerStr); // 输出: "hello, world!"  
console.log(str);      // 输出: "HELLO, WORLD!"，注意原始字符串没有改变

注意事项

• toLowerCase() 方法对字符串中的非字母字符（如数字、空格、标点符号等）没有影响。
• 该方法不区分字符的原始大小写。如果字符已经是小写，则保持不变。
• 对于包含非英文字符（如中文、日文等）的字符串，toLowerCase() 方法的行为通常与英文字符一致，即将所有大写形式的字符（如果它们有对应的小写形式）转换为小写。然而，需要注意的是，不同语言或脚本的大小写转换规则可能不同，因此在处理特定语言或区域设置时，可能需要考虑使用专门的国际化库来确保正确的大小写转换。
• 类似于 toUpperCase() 方法，toLowerCase() 方法也是 JavaScript 字符串处理中非常基础且常用的方法之一。

concat() 

在 JavaScript 中，concat() 方法确实存在于字符串对象中，但它并不是字符串处理中最常用的方法，因为字符串的 + 操作符提供了更简洁的方式来连接（或“拼接”）字符串。然而，了解 concat() 方法在字符串上的行为仍然是有用的。

语法

var newString = str1.concat(str2, str3, ..., strX)

• str1 是调用 concat() 方法的字符串。
• str2, str3, ..., strX 是要连接到 str1 末尾的其他字符串。

示例

var greeting = "Hello, ";  
var name = "Alice";  
var punctuation = "!";  
  
var message = greeting.concat(name, punctuation);  
  
console.log(message); // 输出: "Hello, Alice!"  
console.log(greeting); // 输出: "Hello, "，原字符串没有改变

注意事项

• 字符串的 concat() 方法不会改变原始字符串。它总是返回一个新的字符串，该字符串是原始字符串与所有提供的参数字符串连接的结果。
• 尽管 concat() 方法可以用于字符串连接，但在大多数情况下，使用 + 操作符是更常见的做法，因为它更简洁且易于阅读。
• 如果需要连接数组中的字符串元素，通常会使用数组的 join() 方法，而不是对每个元素调用 concat()。

结论

虽然 concat() 方法在字符串上可用，但在实际开发中，你更可能会看到使用 + 操作符或数组的 join() 方法来连接字符串。这是因为这些方法更加直观和方便。不过，了解 concat() 方法的存在和行为仍然是有益的，特别是当你需要处理一些特殊情况或需要与其他编程语言（如 Java，其中 concat() 是字符串连接的标准方法）的开发者合作时。

String.trim()

String.trim() 是 JavaScript 中的一个字符串方法，用于去除字符串两端的空白字符。这里的“空白字符”通常包括空格（ ）、制表符（\t）、换行符（\n）、回车符（\r）等。trim() 方法不会改变原始字符串，而是返回一个新的字符串，其中不包含两端的空白字符。

语法

var trimmedString = str.trim();

• str 是要处理的原始字符串。
• trimmedString 是去除两端空白字符后的新字符串。

示例

var greeting = "   Hello, World!   ";  
var trimmedGreeting = greeting.trim();  
  
console.log(trimmedGreeting); // 输出: "Hello, World!"  
console.log(greeting);        // 输出: "   Hello, World!   "，原始字符串没有改变

注意事项

• trim() 方法只去除字符串两端的空白字符，不会去除字符串中间的空白字符。
• 如果字符串的两端没有空白字符，trim() 方法将返回原始字符串的一个副本。
• 在一些旧版本的 JavaScript 环境中（如 IE 8 及更早版本），trim() 方法可能不可用。在这些环境中，你可以使用正则表达式来实现相同的功能，例如：str.replace(/^\s+|\s+$/g, '')。
• 除了 trim() 方法外，JavaScript 还提供了 trimStart()（或 trimLeft()）和 trimEnd()（或 trimRight()）方法，分别用于去除字符串开头的空白字符和末尾的空白字符。这些方法是 ECMAScript 2019（ES10）中引入的，因此在一些旧环境中可能不可用。

charAt() 

charAt() 是 JavaScript 中的一个字符串方法，用于获取字符串中指定索引位置的字符。索引值从 0 开始计数，即字符串中第一个字符的索引是 0，第二个字符的索引是 1，依此类推。如果索引值超出字符串的范围，charAt() 方法将返回一个空字符串。

语法

str.charAt(index)

• str 是要从中获取字符的字符串。
• index 是要获取字符的索引位置（整数）。如果索引值为负数或超出字符串的长度，则该方法将返回一个空字符串。

返回值

返回在指定索引位置的字符。如果索引超出范围，则返回空字符串 ""。

示例

var greeting = "Hello, World!";  
var firstChar = greeting.charAt(0); // 获取第一个字符  
var fifthChar = greeting.charAt(4); // 获取第五个字符（注意索引从0开始）  
var outOfRangeChar = greeting.charAt(100); // 索引超出范围  
  
console.log(firstChar); // 输出: "H"  
console.log(fifthChar); // 输出: ","  
console.log(outOfRangeChar); // 输出: ""

注意事项

• 索引值必须是整数，如果传入的是非整数（如浮点数或字符串），则会被转换为整数（通过丢弃小数部分或使用 Number() 函数转换）。
• 如果索引值为负数或超出字符串的长度，charAt() 方法将返回一个空字符串，而不是 undefined 或抛出错误。
• 对于需要频繁访问字符串中字符的场景，使用 charAt() 方法比通过索引直接访问（如 str[index]）在旧版 JavaScript 引擎中可能更慢，因为 charAt() 是一个方法调用。然而，在现代 JavaScript 引擎中，这种差异已经变得非常小，通常可以忽略不计。此外，对于非标准模式（strict mode）下的代码，直接通过索引访问字符串中的字符是允许的，并且可能具有更好的性能。然而，为了代码的兼容性和可读性，仍然推荐使用 charAt() 方法。

charCodeAt()

harCodeAt() 是 JavaScript 中的一个字符串方法，用于获取字符串中指定索引位置的字符的 Unicode 编码（也称为 UTF-16 编码单元）。索引值从 0 开始计数，即字符串中第一个字符的索引是 0，第二个字符的索引是 1，依此类推。如果索引值超出字符串的范围，charCodeAt() 方法将返回 NaN（Not-a-Number）。

语法：

str.charCodeAt(index)

• str 是要从中获取字符编码的字符串。
• index 是要获取编码的字符的索引位置（整数）。如果索引值为负数或超出字符串的长度，则该方法将返回 NaN。

示例

var greeting = "Hello, World!";  
var firstCharCode = greeting.charCodeAt(0); // 获取第一个字符的 Unicode 编码  
var spaceCharCode = greeting.charCodeAt(5); // 获取空格字符的 Unicode 编码  
var outOfRangeCharCode = greeting.charCodeAt(100); // 索引超出范围  
  
console.log(firstCharCode); // 输出: 72，'H' 的 Unicode 编码  
console.log(spaceCharCode); // 输出: 32，空格的 Unicode 编码  
console.log(outOfRangeCharCode); // 输出: NaN

注意事项

• 索引值必须是整数，如果传入的是非整数（如浮点数或字符串），则会被转换为整数（通过丢弃小数部分或使用 Number() 函数转换）。
• 如果索引值为负数或超出字符串的长度，charCodeAt() 方法将返回 NaN，而不是抛出错误。
• charCodeAt() 方法仅返回指定索引位置字符的 UTF-16 编码单元。对于 Unicode 字符（特别是那些需要多个 UTF-16 编码单元来表示的字符，如某些表情符号），你可能需要使用 String.prototype.codePointAt() 方法来获取完整的 Unicode 码点。
• 在处理 Unicode 字符串时，要特别注意字符的编码和表示方式，因为不同的编码和表示方式可能会导致不同的行为。

小知识点：在VS Code中可以使用快捷键Ctrl+D向下复制一行。