JavaScript字符串

JavaScript中的字符串，本质上属于String类型的对象，包括传统的单引号和双引号定义的字符串，以及使用反单引号定义的模板字符串，本文将介绍字符串的常用操作，如连接、截取、转化、分割、替换、大小写转换、查询内容、删除空白字符、填充字符串等操作。

字符串连接

两个字符串连接，可以直接使用加号运算符（+），也可以使用字符串对象的concat()方法，如下面的代码演示了这两种连接方法的应用。

JavaScript

<script>
    let s1 = "abc", s2 = "def";
    alert(s1 + s2 + "ghi");
    alert(s1.concat(s2, "ghi"));
</script>

代码中，两个alert()函数调用都会显示abcdefghi。

如果其它类型的数据与字符串进行“加法”运算会得到什么结果呢？先来看下面的例子。

JavaScript

<script>
    alert(1 + 2 + "abc");
</script>

加法运算是左结合，本例会先计算1+2得3，然后计算3+"abc"，数值和字符串相加会执行字符串连接操作，即得到字符串"3abc"。

其它类型的数据与字符串相加时，同样也是进行字符串连接，会将数据的字面量转换为字符串格式，然后进行连接，如"abc"+true结果为"abctrue"，"abc"+NaN结果为"abcNaN"，"abc"+null结果为"abcnull"。

将多个变量和表达式组合成字符串时，使用模板字符串会让代码更加简洁、可读性也更强，如下面的代码。

JavaScript

<script>
    let x = 10, y = 99;
    alert(`${x}+${y}=${x + y}`);
</script>

执行代码会显示10+99=109。

获取字符串长度

使用字符串对象的length属性可以获取字符数量，如下面的代码。

JavaScript

<script>
    let s = "中文测试abcd";
    alert(s.length);
</script>

执行代码会显示8。

截取字符串和字符

substring()和slice()方法都可以截取字符串中的一部分，其参数设置也比较相似，包括：

参数一，设置开始截取的字符索引。第一个字符索引为0，第二字符索引为1，最后一个字符索引为字符数量减1。
参数二，设置截取的结束位置索引，但截取内容不包含此字符。

下面的代码演示了substring()方法的应用。

JavaScript

<script>
    let s = "中文测试abcd";
    alert(s.substring(2,4)); // 测试
</script>

如果不指定第二个参数，则从参数一开始的索引位置截取全部内容，如下面的代码。

JavaScript

<script>
    let s = "中文测试abcd";
    alert(s.substring(2)); // 测试abcd
</script>

slice()与substring()方法，如果两个参数都是正数则功能相同；不同点在于，slice()方法的第二个参数可以设置为负数；当参数二为负数时，其绝对值表示截取到字符串末尾的多少个字符之前，如下面的代码。

JavaScript

<script>
    let s = "中文测试abcd";
    alert(s.slice(2,-2)); // 测试ab
</script>

本例，指定从第三个字符（索引2）开始截取，并且不包含后两个字符，截取内容为"测试ab"。

请注意，如果slice()与substring()方法的参数设置无法截取有效的子字符串，则返回空字符串，即length属性值为0。

charAt(i)方法可以获取索引位置i的字符，如下面的代码。

JavaScript

<script>
    let s = "中文测试abcd";
    alert(s.charAt(2)); // 测
</script>

请注意，如果指定的索引位置不正确则返回空字符串。

charCodeAt(i)方法可以获取索引位置i的字符的Unicode编码。如果指定的索引位置不正确则返回undefined。

codePointAt(i)方法同样可以获取索引位置i的字符的Unicode编码，但处理范围更完整。如果指定的索引位置不正确则返回undefined。

分割字符串

使用字符串对象的split()方法，将通过指定内容将字符串分割为多个子字符串组成的数组；方法可以使用两个参数，其中，参数一指定分割字符；参数二指定返回多少个分割后的子字符串，不指定时返回全部子字符串。

下面的代码会使用逗号分割字符串，并显示第2个子字符串（索引1）的内容。

JavaScript

<script>
    let s = "abc,def,ghi";
    let arr = s.split(",");
    alert(arr[1]); // def
</script>

下面的代码演示了第二个参数的应用。

JavaScript

<script>
    let s = "abc,def,ghi,jkl";
    let arr = s.split(",", 3);
    alert(arr.length); // 3
    alert(arr[2]); // ghi
</script>

本例，split()方法参数二设置为3，表示只保留分割后的前三个子字符串组成的数组，在arr数据对象中，首先使用length属性显示了成员数量3，然后显示了第三个成员（索引2）的内容ghi。

splite()方法中，还可以使用正则表达式的模式设置分割内容，后续文章会有详细讨论。

替换内容

replace()方法可使用新内容替换字符串中指定的内容，并返回替换后的新字符串。其中，参数一指定旧的内容，参数二指定替换的新内容。下面的代码演示了replace()方法的应用。

JavaScript

<script>
    let s = "abc,def,abc,ghi";
    alert(s.replace("abc","***")); // ***,def,abc,ghi
</script>

本例会显示"***,def,abc,ghi"，只替换了第一个"abc"，而第二个"abc"没有被替换。如果需要替换所有指定的内容，可以在参数一使用正则表达式模式，如下面的代码。

JavaScript

<script>
    let s = "abc,def,abc,ghi";
    alert(s.replace(/abc/g,"***")); // ***,def,***,ghi
</script>

本例，在参数一中使用/abc/g模式，其中abc为需要替换的内容，标识g表示搜索字符串全部内容；执行结果会将s字符串中的所有"abc"替换为"***"。更多关于JavaScript正则表达式的应用会在后续文章中详细介绍。

大小写转换

字符串对象的toLowerCase()方法可以将字符串中的所有字母转换为小写，并返回转换后的新字符串；toUpperCase()方法可以将字符串中的所有字母转换为大写，并返回转换后的新字符串。下面的代码演示了这两个方法的应用。

JavaScript

<script>
    let s = "abc,DEF,ghi";
    alert(s.toLowerCase()); // abc,def,ghi
    alert(s.toUpperCase()); // ABC,DEF,GHI
</script>

字符串查询

字符串对象的startsWith()方法可以判断字符串是否以指定的内容开始，endsWith()方法则判断是否以指定的内容结束；includes()方法判断字符串中是否包含指定的内容；这三个函数的参数需要指定查询的内容，并返回查询结果，找到查询的内容时返回true，否则返回false。下面的代码演示了这三个方法的应用。

JavaScript

<script>
    let s = "abc,DEF,ghi";
    alert(s.startsWith("abc")); // true
    alert(s.startsWith("def")); // false
    alert(s.startsWith("ABC")); // false
    alert(s.endsWith("ghi")); // true
    alert(s.endsWith("abc")); // false
    alert(s.includes("def")); // false
    alert(s.includes("DEF")); // true
</script>

从代码执行结果中可以看到，startsWith()、endsWith()和includes()方法在匹配字符串时是区分字母大小写的。

此外，includes()方法还可以使用第二个参数指定开始搜索的字符位置，如下面的代码。

JavaScript

<script>
    let s = "abc,DEF,ghi";
    alert(s.includes("DEF",9)); // false
    alert(s.includes("DEF",3)); // true
</script>

indexOf()方法可以获取指定内容在字符串中第一次出现的位置索引；lastIndexOf()方法可以获取指定内容在字符串中最后一次出现的位置索引，两个方法会返回查找内容出现的索引位置，没有找到时返回-1。下面的代码演示了这两个方法的应用。

JavaScript

<script>
    let s = "abc,def,abc,ghi";
    alert(s.indexOf("abc")); // 0
    alert(s.lastIndexOf("abc")); // 8
</script>

indexOf()和lastIndexOf()还可以使用第二个参数设置从哪个位置开始搜索，如下面的代码。

JavaScript

<script>
    let s = "abc,def,abc,ghi";
    alert(s.indexOf("abc",11)); // -1
    alert(s.indexOf("abc", 8)); // 8
    alert(s.lastIndexOf("abc",7)); // 0
</script>

第一个alert()函数调用，在indexOf()方法中设置从第12个字符（索引11）开始搜索，也就是在",ghi"中查找"abc"，结果没有匹配的内容，方法会返回-1。第二个alert()函数调用，在indexOf()方法中设置从第9个字符（索引8）开始搜索，也就是在"abc.ghi"中查找"abc"，结果返回8。第三个alert()函数调用，在lastIndexOf()方法中设置从第8个字符（索引7）开始向前搜索，也就是在"abc,def"中查找"abc"，结果返回0。

删除开始和结束部分的空白字符

删除开始和结束部分的空白字符，可以使用字符串对象的以下三个方法：

trim()方法，同时删除字符串开始和结束部分的空白字符。
trimStart()方法，删除字符串开始部分的空白字符。
trimEnd()方法，删除字符串结束部分的空白字符。

填充字符串

padStart()方法可以指定字符串的长度，如果原始字符串大于或等于指定的长度则返回原始字符串；如果原始字符长度不够，则在前方填充指定的字符，padEnd()方法则是在后方填充指定的字符。下面的代码演示了这两个方法的应用。

JavaScript

<script>
    let s = "abc";
    alert(s.padStart(8, "*")); // *****abc
    alert(s.padEnd(8, "*")); // abc*****
</script>

请注意，如不使用第二个参数指定填充字符，则默认使用空格填充。