JavaScript 字符串方法

字符串是一种对象， JavaScript 给字符串对象提供一些属性和方法，这些方法能帮你很方面的处理字符串，比如截取子串、替换、正则匹配等。

字符串是一种对象， JavaScript 给字符串对象提供一些属性和方法，这些方法能帮你很方面的处理字符串，比如截取子串、替换、正则匹配等。

字符串长度

length 属性返回字符串的长度：

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log("字符串长度：", text.length); // 输出 -> 字符串长度： 26

截取子字符串

有 3 种方法可以截取字符串的一部分：

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

slice() 方法

slice() 提取字符串的一部分并将提取的部分作为新字符串返回。

方法采用 2 个参数：开始位置和结束位置（不包括结束位置）。

此示例截取位置 7 到位置 12 (13-1) 之间的子串：

let str1 = "Apple, Banana, Kiwi";
let str2 = str1.slice(7, 13);
console.log(str2); // 输出 Banana

JavaScript 从 0 开始计算位置，也就是说字符串的第一个字符的位置是 0。

如果参数为负数，则从字符串末尾开始计算位置。

此示例截取位置 -12 到位置 -6 之间的子串：

let str1 = "Apple, Banana, Kiwi";
let str2 = str1.slice(-12, -6);
console.log(str2); // 输出 Banana

如果省略第二个参数，则截取开始位置到结束：

let str1 = "Apple, Banana, Kiwi";
let str2 = str1.slice(7);
console.log(str2); // 输出 Banana, Kiwi

substring() 方法

substring() 类似于 slice()，不同的是 substring() 不接受负数位置。

let str1 = "Apple, Banana, Kiwi";
let str2 = str1.substring(7, 13);
console.log(str2); // 输出 Banana

substr() 方法

substr() 类似于 slice()，不同的是，第二个参数指定了提取子串长度。

let str1 = "Apple, Banana, Kiwi";
let str2 = str1.substr(7, 6);
console.log(str2); // 输出 Banana

如果省略第二个参数， `则截取开始位置到结束：

let str1 = "Apple, Banana, Kiwi";
let str2 = str1.substr(7);
console.log(str2); // 输出 Banana, Kiwi

如果第一个参数为负，则位置从字符串的末尾开始计数。

let str1 = "Apple, Banana, Kiwi";
let str2 = str1.substr(-4);
console.log(str2); // 输出 Kiwi

替换字符串内容

replace() 方法用指定的内容来替换字符串的部分内容：

let text = "Please visit baidu!";
let newText = text.replace("baidu", "GoBeta.net");
console.log(newText); // 输出 Please visit GoBeta.net!

replace() 方法不会更改原字符串。它返回一个新字符串。

默认情况下， replace() 方法仅替换第一个匹配项：

let text = "Please visit baidu and baidu!";
let newText = text.replace("baidu", "GoBeta.net");
console.log(newText); // 输出 Please visit GoBeta.net and baidu!

默认情况下， replace() 方法区分大小写。

要替换不区分大小写，请使用带有标志 /i 的正则表达式：

let text = "Please visit baidu!";
let newText = text.replace(/BAIDU/i, "GoBeta.net");
console.log(newText); // 输出 Please visit GoBeta.net!

!! 请注意，正则表达式是不带引号的。

要替换所有匹配项，请使用带有 /g（全局匹配项） 标志的正则表达式：

let text = "Please visit baidu and baidu!";
let newText = text.replace(/baidu/g, "GoBeta.net");
console.log(newText); // 输出 Please visit GoBeta.net and GoBeta.net!

您将在JavaScript 正则表达式一章中学到更多关于正则表达式的知识。

转换为大写和小写

toUpperCase() 方法将一个字符串转换为大写 ：

let text1 = "Hello World!";
let text2 = text1.toUpperCase();
console.log(text2); // 输出 HELLO WORLD!

toLowerCase() 将一个字符串转换为小写：

let text1 = "Hello World!";
let text2 = text1.toLowerCase();
console.log(text2); // 输出 hello world!

concat() 方法

concat() 连接两个或多个字符串：

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
console.log(text3); // 输出 Hello World

concat() 的作用和 + 运算符的作用一样。这两行做同样的事情：

let text1 = "Hello" + " " + "World!";
let text2 = "Hello".concat(" ", "World!");
console.log(text1); // 输出 Hello World
console.log(text2); // 输出 Hello World

所有字符串方法都返回一个新字符串。他们不会修改原始字符串。 正式说：字符串是不可变的：字符串不能改变，只能替换。

trim() 方法

trim() 方法删除字符串的两侧的空格：

let text1 = "       Hello World!        ";
let text2 = text.trim();
console.log(text2); // 输出 Hello World!

JavaScript 字符串填充

ECMAScript 2017 添加了两个 String 方法：padStart 和 padEnd 支持在字符串的开头和结尾填充指定的字符。

let text1 = "5";
let text2 = text1.padStart(4, 0);
console.log(text2); // 输出 0005

let text1 = "5";
let text2 = text1.padEnd(4, 0);
console.log(text2); // 输出 5000

Internet Explorer 不支持字符串填充。

Firefox 和 Safari 是第一批支持 JavaScript 字符串填充的浏览器：

Chrome Edge Firefox Safari Opera
Chrome 57 Edge 15 Firefox 48 Safari 10 Opera 44
Mar 2017 Apr 2017 Aug 2016 Sep 2016 Mar 2017

提取字符串字符

有 3 种的方法可以提取字符串指定位置索引的字符：

  • charAt(positionIndex)
  • charCodeAt(positionIndex)
  • 索引访问 [positionIndex]

charAt() 方法

charAt() 方法返回字符串中指定索引（位置）处的字符：

let text = "HELLO WORLD";
let char = text.charAt(0);
console.log(char); // 输出 H

charCodeAt() 方法

charCodeAt() 方法返回字符串中指定索引处字符的 unicode， 方法返回一个 UTF-16 代码（0 到 65535 之间的整数）。

let text = "HELLO WORLD";
let charCode = text.charCodeAt(0);
console.log(charCode); // 输出 72

索引访问

ECMAScript 5 (2009) 允许对字符串进行索引访问 [ ]：

let text = "HELLO WORLD";
let char = text[0]; 
console.log(char); // 输出 H

索引访问可能有点不可预测：

  • 它使字符串看起来像数组（但它们不是）
  • 如果没有找到字符，[] 返回 undefined，而 charAt() 返回一个空字符串。
  • 它是只读的，不能通过索引访问来替换某位置的字符。str[0] = "A" 没有给出错误（但不起作用！）
let text = "HELLO WORLD";
text[0] = "A"; // Gives no error, but does not work
text[0]; // returns H

如果要将字符串作为数组处理，可以将其转换为数组。

分割字符串

split() 方法将字符串按照指定的分隔符对字符串进行分割，并返回分割后的字符串数组。

text.split(","); // 以逗号 `,` 分割字符串
text.split(" "); // 以空格 ` ` 分割字符串
text.split("|"); // 以竖线 `|` 分割字符串

let text = "Apple,Orange,Peach";
let fruits = text.split(',');
console.log(fruits); // 输出 ["Apple", "Orange", "Peach"]
JavaScript字符串 JavaScript 数字