返回

爱上用字符在前端玩的21个方法

前端

在前端开发中，字符串是一个非常重要的数据类型，我们经常会使用各种字符串方法来处理字符串。在本篇文章中，我们将介绍一些常用的字符串方法，并通过一些示例来演示如何使用这些方法。

1. charAt() 方法

charAt() 方法返回指定索引位置的字符。

语法：

string.charAt(index);

参数：

  • index：要返回的字符的索引位置。

返回值：

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

示例：

const str = "Hello World";

console.log(str.charAt(0)); // "H"
console.log(str.charAt(4)); // "o"
console.log(str.charAt(10)); // ""

2. charCodeAt() 方法

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

语法：

string.charCodeAt(index);

参数：

  • index：要返回的字符的索引位置。

返回值：

  • 返回指定索引位置的字符的 Unicode 编码。

示例：

const str = "Hello World";

console.log(str.charCodeAt(0)); // 72
console.log(str.charCodeAt(4)); // 111
console.log(str.charCodeAt(10)); // NaN

3. concat() 方法

concat() 方法将一个或多个字符串连接到调用它的字符串的末尾。

语法：

string.concat(str1, str2, ..., strN);

参数：

  • str1, str2, ..., strN：要连接到调用它的字符串的字符串。

返回值：

  • 返回一个包含所有连接字符串的新字符串。

示例：

const str1 = "Hello";
const str2 = "World";

console.log(str1.concat(str2)); // "HelloWorld"
console.log(str1.concat(" ", str2)); // "Hello World"
console.log(str1.concat(" ", str2, "!")); // "Hello World!"

4. endsWith() 方法

endsWith() 方法检查一个字符串是否以指定的字符串结尾。

语法：

string.endsWith(searchString, length);

参数：

  • searchString：要检查的字符串。
  • length：可选。要检查的字符串的长度。

返回值：

  • 如果字符串以指定的字符串结尾，则返回 true；否则返回 false。

示例：

const str = "Hello World";

console.log(str.endsWith("World")); // true
console.log(str.endsWith("orld")); // false
console.log(str.endsWith("World", 10)); // true

5. includes() 方法

includes() 方法检查一个字符串是否包含指定的字符串。

语法：

string.includes(searchString, start);

参数：

  • searchString：要检查的字符串。
  • start：可选。要从其开始检查的字符串的索引位置。

返回值：

  • 如果字符串包含指定的字符串，则返回 true；否则返回 false。

示例：

const str = "Hello World";

console.log(str.includes("World")); // true
console.log(str.includes("orld")); // true
console.log(str.includes("World", 6)); // false

6. indexOf() 方法

indexOf() 方法返回指定字符串在调用它的字符串中首次出现的索引位置。

语法：

string.indexOf(searchString, start);

参数：

  • searchString：要查找的字符串。
  • start：可选。要从其开始查找的字符串的索引位置。

返回值：

  • 如果字符串包含指定的字符串，则返回指定字符串在调用它的字符串中首次出现的索引位置；否则返回 -1。

示例：

const str = "Hello World";

console.log(str.indexOf("World")); // 6
console.log(str.indexOf("orld")); // 7
console.log(str.indexOf("World", 10)); // -1

7. lastIndexOf() 方法

lastIndexOf() 方法返回指定字符串在调用它的字符串中最后一次出现的索引位置。

语法：

string.lastIndexOf(searchString, start);

参数：

  • searchString：要查找的字符串。
  • start：可选。要从其开始查找的字符串的索引位置。

返回值：

  • 如果字符串包含指定的字符串，则返回指定字符串在调用它的字符串中最后一次出现的索引位置；否则返回 -1。

示例：

const str = "Hello World";

console.log(str.lastIndexOf("World")); // 6
console.log(str.lastIndexOf("orld")); // 7
console.log(str.lastIndexOf("World", 2)); // -1

8. match() 方法

match() 方法将一个正则表达式与一个字符串进行匹配，并返回一个匹配结果数组。

语法：

string.match(regexp);

参数：

  • regexp：要匹配的正则表达式。

返回值：

  • 一个匹配结果数组。

示例：

const str = "Hello World";

console.log(str.match(/o/g)); // ["o", "o", "o"]
console.log(str.match(/World$/)); // ["World"]
console.log(str.match(/World/g)); // ["World"]

9. replace() 方法

replace() 方法用一个新的字符串替换字符串中与正则表达式匹配的所有匹配项。

语法：

string.replace(regexp, newString);

参数：

  • regexp：要匹配的正则表达式。
  • newString：要替换匹配项的新字符串。

返回值：

  • 一个包含已替换所有匹配项的新字符串。

示例：

const str = "Hello World";

console.log(str.replace(/o/g, "O")); // "HellO WOrld"
console.log(str.replace(/World$/, "Universe")); // "Hello Universe"
console.log(str.replace(/World/g, "Universe")); // "Hello Universe"

10. search() 方法

search() 方法使用正则表达式来查找一个字符串，并返回第一个匹配项的索引位置。

语法：

string.search(regexp);

参数：

  • regexp：要匹配的正则表达式。

返回值：

  • 第一个匹配项的索引位置。如果没有匹配项，则返回 -1。

示例：

const str = "Hello World";

console.log(str.search(/o/g)); // 4
console.log(str.search(/World$/)); // 6
console.log(str.search(/World/g)); // 6

11. slice() 方法

slice() 方法从一个字符串中提取一个子字符串。

语法：

string.slice(start, end);

参数：

  • start：要开始提取子字符串的索引位置。
  • end：要结束提取子字符串的索引位置。

返回值：

  • 一个包含已提取子字符串的新字符串。

示例：

const str = "Hello World";

console.log(str.slice(0, 5)); // "Hello"
console.log(str.slice(6)); // "World"
console.log(str.slice(2, 7)); // "llo W"

12. split() 方法

split() 方法将一个字符串分割成一个数组。

语法：

string.split(separator, limit);

参数：

  • separator：要分割字符串的分隔符。
  • limit：可选。要分割字符串的最大子字符串数。

返回值：

  • 一个包含已分割子字符串的数组。

示例：

const str = "Hello World";

console.log(str.split(" ")); // ["Hello", "World"]
console.log(str.split(" ", 1)); // ["Hello"]
console.log(str.split("")); // ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

13. substring() 方法

substring() 方法从一个字符串中提取一个子字符串。

语法：

string.substring(start, end);

参数：

  • start：要开始提取子字符串的索引位置。
  • end：要结束提取子字符串的索引位置。

返回值：

  • 一个包含已提取子字符串的新字符串。

示例：

const str = "Hello World";

console.log(str.substring(0, 5)); // "Hello"
console.log(str.substring(6)); // "World"
console.log