Chipmunk & Panda

-- 鼠熊部落格

All work and no play makes Jack a dull boy.

JavaScript 字符串常用操作方法总结

  前端  

包括字符串截取方法、分割方法、balabala……

字符串拼接

字符串拼接使用 concat() 方法，该方法可接收任意多个参数。

1
2
3
4
5
6
7
8
let str1 = '你所热爱的'
let result = str1.concat('就是你的生活')
console.log(result) // 你所热爱的就是你的生活

result = str1.concat(',', '就是你的生活', '。') // 你所热爱的,就是你的生活。
console.log(result)

console.log(str1) // 你所热爱的

该方法并不会修改原字符串。

……实际上，你这个问题用 + 号就能解决。

1
2
3
let lemon = '柠檬'
result = lemon + '什么时候' + '酸啊' + '？' // 柠檬什么时候酸啊？
console.log(result)

字符串截取

注意：substr() 方法已经不再建议被使用！！！

从字符串中截取一部分，可以使用 slice()、substring() 或 substr()，三个方法的区别主要在于第二个参数的含义。

三个方法均不会修改原字符串。

1
2
3
4
let str2 = '0123456789'
console.log(str2.slice(4)) // 456789
console.log(str2.substring(4)) // 456789
console.log(str2.substr(4)) // 456789

三个方法的第一个参数含义均为截取开始位置，当只有第一个参数时，三个方法均默认截取至字符串结束。

1
2
3
console.log(str2.slice(2, 4)) // 23
console.log(str2.substring(2, 4)) // 23
console.log(str2.substr(2, 4)) // 2345

slice() 与 substring() 的第二个参数含义均为截取结束的位置，会截取到该索引值的前一位字符，即截取部分为 [2, 4)。

substr() 的第二个参数含义为截取的字符数，即共截取 4 个字符。

三个方法对值为负的参数的处理方法不同，可能会将其与字符串长度相加（等价为从 1 开始倒数）后处理，也可能会将负值参数直接视为 0。

方法 参数 1 参数 2
slice() 倒数 倒数
substring() 0 0
substr() 倒数 0 
1
2
3
4
5
6
console.log(str2.slice(-3)) // 789
console.log(str2.substring(-3)) // 0123456789
console.log(str2.substr(-3)) // 789
console.log(str2.slice(2, -3)) // 23456
console.log(str2.substring(2, -3)) // 01
console.log(str2.substr(2, -3)) // (empty)

当最终进行截取时第一个参数反而比第二个参数小时，则会将较小数作为七点，较大数作为终点。

console.log(str2.substring(2, 0)); // 01

判断字符串是否包含某一子串（定位方法与包含方法）

定位方法

判断字符串是否包含某一子串，一种方法是使用 indexOf()，该方法返回找到的第一个子串的首字符索引，没找到时则返回 -1。

1
2
3
let str3 = '这几天天天天天气不好。'
console.log(str3.indexOf('天')) // 2
console.log(str3.indexOf('地')) // -1

与 indexOf() 相对的还有 lastIndexOf，返回找到的最后一个子串的首字符索引，没找到返回 -1。

1
2
console.log(str3.lastIndexOf('天天')) // 5
console.log(str3.lastIndexOf('地')) // -1

这俩方法还有第二个参数（可选），表示从哪个索引开始搜索（包括该索引）。

1
2
3
4
5
let str4 = '他大舅他二舅都是他舅。'
console.log(str4.indexOf('舅', 3)) // 5
console.log(str4.lastIndexOf('舅', 4)) // 2
console.log(str4.indexOf('舅', 9)) // 9
console.log(str4.lastIndexOf('舅', 9)) // 9

包含方法

包含方法一般常用 includes()，返回 bool 值。此外还有判断是否在开头包含的 startsWith() 和是否在结尾包含的 endsWith()。

1
2
3
4
5
6
7
8
9
10
let str5 = '左脚清明 右脚重阳'

console.log(str5.includes('清明')) // true
console.log(str5.includes('反复')) // false

console.log(str5.startsWith('左脚')) // true
console.log(str5.startsWith('清明')) // false

console.log(str5.endsWith('重阳')) // true
console.log(str5.startsWith('右脚')) // false

这仨也有可选的第二个参数，表示将该值视为字符串的开头或结尾。

1
2
3
console.log(str5.includes('清明', 3)) // false
console.log(str5.startsWith('清明', 2)) // true
console.log(str5.endsWith('清明', 4)) // true

需要注意，对于 endsWith()，该索引值不包含在划分后的字符串中。其实，将该值视作字符串长度更合适。

字符串处理

删除前后空格

使用 trim() 方法，该方法不会修改原字符串。

1
2
3
let str6 = '  编程有你，春暖花开   '
console.log(str6.trim()) // "编程有你，春暖花开"
console.log(str6) // "  编程有你，春暖花开   "

字符串重复

使用 repeat() 方法复读！

1
console.log('家门口有两棵树' + '，一颗是枣树'.repeat(2) + '。') // 家门口有两棵树，一颗是枣树，一颗是枣树。

大小写转换

字面意思。

1
2
3
4
5
6
let str7 = 'I Like Pussy.' // 我爱咪咪。
console.log(str7.toUpperCase()) // I LIKE PUSSY.
console.log(str7.toLocaleUpperCase()) // I LIKE PUSSY.
console.log(str7.toLowerCase()) // i like pussy.
console.log(str7.toLocaleLowerCase()) // i like pussy.
console.log(str7) // I Like Pussy.

上述方法不会修改原字符串，带 Local 字段的方法会基于特定地区语言进行转换，如果不能确定代码设计什么语言，建议使用该方法。

正则匹配

使用 match() 方法在字符串中匹配符合正则表达式的内容，该方法与 RegExp 实例的 exec() 方法基本一样，不过是把接收参数从字符串变为了正则表达式。

（摘自 《JavaScript 高级程序设计》）
如果找到了匹配项，则返回包含第一个匹配信息的数组；如果没找到匹配项，则返回 null。返回的数组虽然是 Array 的实例，但包含两个额外的属性：index 和 input。index 是字符串
中匹配模式的起始位置，input 是要查找的字符串。这个数组的第一个元素是匹配整个模式的字符串，其他元素是与表达式中的捕获组匹配的字符串。如果模式中没有捕获组，则数组只包含一个元素。

1
2
3
4
let str8 = '老五跟老四说老三的老二老大了。'
let regexp = /老./
let mathchResult = str8.match(regexp)
console.log(mathchResult) // [ '老五', index: 0, input: '老五跟老四说老三的老二老大了。', groups: undefined ]

与之相比，search() 方法要更加简洁，直接返回匹配到的第一个位置的索引，没有匹配则返回 -1。

1
console.log(str8.search(/.三/)) // 6

字符串替换

使用 replace() 方法进行字符串替换，第一个参数用于选择将被替换的内容，可以使用字符串或正则表达式。如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，第一个参数必须为正则表达式并且带全局标记 g。

1
2
3
4
let str9 = '他大舅，他二舅。'
console.log(str9.replace('大舅', '舅')) // 他舅，他二舅。
console.log(str9.replace(/.舅/g, '舅')) // 他舅，他舅。
console.log(str9) // 他大舅，他二舅。

该方法不会修改原字符串。

字符串分割

使用 split() 将字符串分割为数组，可选接受两个参数，第一个参数设置分隔符（默认为“ ”），第二个参数设置返回数组的最大长度（为空则返回整个字符串分割后的数组）。

1
2
3
4
let str10 = '逮住 蛤蟆，攥出 尿来'
console.log(str10.split()) // [ '逮住 蛤蟆，攥出 尿来' ]
console.log(str10.split('，')) // [ '逮住 蛤蟆', '攥出 尿来' ]
console.log(str10.split(' ', 2)) // [ '逮住', '蛤蟆，攥出' ]