《看完就懂系列》15个方法教你玩转字符串

这是大冰块2021年第2篇原创文章，和大冰块一起在前端领域努力吧！！！

作为JavaScript基础数据类型，字符串具有一些很强大的方法，在平时的工作中用到的地方也特别的多，很多时候因为不熟悉某个字符串的方法，往往走了很多弯路，所以大冰块整理了15个常用又高效的字符串方法，来一起看看这15个提升工作效率的方法吧！

1. 字符串去除首尾空格 —— trim()

说明： 去除字符串两边的空白。

需求场景： 用户搜索前去除输入的首尾空格。

用法： string.trim()

例子：

let str = "    白色不白，黑色不黑，我...我不喜欢你   "
let result = str.trim()
console.log(result); // 控制台打印："白色不白，黑色不黑，我...我不喜欢你"

2. 字符串替换指定字符（串）—— replace()

说明： 字符串替换字符还是replace()最强大~默认替换第一个符合条件的字符串，也可用正则做全局匹配

需求场景： 字符串的替换，关键词的屏蔽隐藏等

**用法： ** string.replace(searchvalue,newvalue)

例子：

let str = "你知道吗？世界上有60亿人，宇宙有60万亿小行星，你比小行星还要珍贵一万倍"
let result1 = str.replace("亿","个")
let result2 = str.replace(/亿/g,"个")
console.log(result1)  // 控制台打印："你知道吗？世界上有60个人，宇宙有60万亿小行星，你比小行星还要珍贵一万倍"
console.log(result2)  // 控制台打印："你知道吗？世界上有60个人，宇宙有60万个小行星，你比小行星还要珍贵一万倍"

3. 字符串合并 —— concat()

说明： 连接两个或更多字符串，并返回新的字符串。（悄悄告诉你，数组也可以使用哦~）

需求场景： 字符串合并展示。

用法： string.concat()

例子：

let str1 = "我有很多好听的情话,"
let str2 = "可面对你都不敢说不出口。"
let result = str1.concat(str2)
console.log(result) // 控制台打印："我有很多好听的情话,可面对你都不敢说不出口。"

4. 字符串转数组 —— split()

说明： 把字符串通过特定字符分割为字符串数组，split还可以使用正则表达式实现拆分多个分隔符。

需求场景： 字符串转数组进行遍历等操作。

用法1： string.split()

用法2： string.split(/[*]/)

例子：

let str = "张三,李四;王五"
let result1 = str.split(',')
let result2 = str.split(/[,;]/)
console.log(result1) // 控制台打印：["张三", "李四;王五"]
console.log(result2) // 控制台打印：["张三", "李四", "王五"]

5. 字符串转数组 —— […string]

**说明： ** 说起来，这并不是字符串的方法，主要是我觉得ES6语法中的扩展操作符的…语法是转数组最简洁的方法。它和split()区别在于：...语法不根据特定字符切割，而是把每个字符都当作单独的元素添加到数组中。

**需求场景： ** 字符串全部分割成字符数组。

用法： [...string]

例子：

let str = '这是一个字符串string'
let arr = [...str]
console.log(arr) // 控制台打印：["这", "是", "一", "个", "字", "符", "串", "s", "t", "r", "i", "n", "g"]

6. 字符串反转 —— […string].reverse().join("")

说明： 这个也不能算是字符串方法，但是好用。本质上还是转成数组，数组反转之后，再拼接成字符串。

需求场景： 将当前字符串反转输出

用法： [...string].reverse().join("")

例子：

let str = "两极反转，龙卷风摧毁停车场!"
let result = [...str].reverse().join("")
console.log(result) // 控制台打印：!场车停毁摧风卷龙，转反极两

7. 字符串的多次复制 —— repeat ()

说明： 复制字符串指定次数，并将它们连接在一起返回。

需求场景： 字符串需要进行 n 次自动复制。

用法： string.repeat(n)

例子：

let str1 = '复制'
let result = str1.repeat(2)
consol.log(result) // 控制台打印：复制复制let str2 = '10'
let result = str2.repeat(5)
console.log(result) // 控制台打印：1010101010

8. 字符串是否包含某字符（串）—— search()

**说明：**检索字符串中指定的或与正则表达式相匹配的首个子字符串。如果匹配到了则返回匹配字符串首字符下标，如果没有匹配到，则返回 -1。

需求场景： 字符串内关键字的搜索查询定位。

用法： string.search(searchvalue)。

例子：

let str = "今天的夜色很好，月亮也很圆，唯一遗憾的是，我不是从你的窗子里看到的月亮。"
let result1 = str.search("月亮")
let result2 = str.search(/[，。]/)
console.log(result1) // 控制台打印：8
console.log(result2) // 控制台打印：7

9. 字符串内是否包含某字符（串）—— includes()

说明： includes()可选择从某处下标之后开始查找，返回true或false。第二个参数代表从某下标处开始查找，忽略则代表从下标0开始查找。

它和search()区别在于：search()返回指定下标， includes()返回true或false；search()不能从指定下标开始查找， includes()可以从指定下标处开始查找。

需求场景： 判断字符串中是否有不合法字符等

用法： string.includes(searchvalue, start)

例子：

let str = "没有夏日的的凉风，也没有冬日的暖阳，它们只是恰好出现在了合适的时间罢了"
let result1 = str.includes("冬日")
let result2 = str.includes("冬日",20)
console.log(result1); // 控制台打印：true
console.log(result2); // 控制台打印：false

10. 字符串中指定的字符串值在首次或最后一次出现的位置 —— indexOf() 和 lastIndexOf()

说明：

indexOf() 方法可返回某个指定的字符串值首次出现的位置，即从前向后搜索。如果指定第二个参数 start，则在字符串中的指定位置开始从前向后搜索。

lastIndexOf() 方法可返回某个指定的字符串值最后出现的位置，即从后向前搜索。如果指定第二个参数 start，则在字符串中的指定位置从后向前搜索。

需求场景： 关键字首次或最后一次出现的位置

用法1： string.indexOf(searchvalue,start) 指定的字符串值首次出现的位置

用法2： string.lastIndexOf(searchvalue,start) 指定的字符串值最后出现的位置

例子：

let str = "你来人间一趟，你要看看太阳。和你的心上人一起走在街上，了解她，也要了解太阳"
let result1 = str.indexOf("太阳")
let result2 = str.indexOf("太阳",10)  // 从10下标的字符开始查找"太阳"，查找范围是"太阳。和你的心上人一起走在街上，了解她，也要了解太阳"，下标还是相对原字符串而言的，因此返回11。
let result3 = str.lastIndexOf("太阳")
let result4 = str.lastIndexOf("太阳",10)  // 0-10下标的字符串为"你来人间一趟，你要看看"，没有"太阳"，返回-1
console.log(result1) // 控制台打印：11
console.log(result2) // 控制台打印：11
console.log(result3) // 控制台打印：35
console.log(result4) // 控制台打印：-1

11. 字符串转大小写 —— toLowerCase() 和 toUpperCase()

说明： 字符串大小写之间的转换

需求场景： 网址，英文名，首字母大写等要求。

用法1： string.toLowerCase() 转成小写字母

用法2： string.toUpperCase() 转成大写字母

例子：

let str = "For you, A thousand times over"
let result1 = str.toLowerCase()
let result2 = str.toUpperCase()
console.log(result1) // 控制台打印："for you, a thousand times over"
console.log(result2) // 控制台打印："FOR YOU, A THOUSAND TIMES OVER"

12. 字符串填充到指定长度 —— padStart () 和 padEnd ()

说明： 字符串填充指定字符到指定长度

需求场景： 字符串长度不足，需要补充至指定长度n，如年月日，隐藏手机号，隐藏昵称等。

用法1： string.padStart(n,'补充内容') 从字符串前添加补充内容。

用法2： string.padEnd (n,'补充内容') 从字符串后添加补充内容。

例子：

// 在字符串前补充"-"，直到字符串的长度为5
let str1 = '预备开始'
let result = str1.padStart(5, '-')
console.log(result) // 控制台打印："---预备开始"//在末尾添加"*"，直到字符串的长度为11
let str2 = "184"
let result = str2.padEnd(11, "*")
console.log(result) // 控制台打印："184********"

13. 字符串是否以特定字符（串）开头或结尾 —— startsWith()、endsWith()

说明： 用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true，否则 false。startsWith()、endsWith()方法区分大小写。第二个参数代表从某下标处开始判断是否以特定字符（串）开头或结尾，忽略则startsWith()从下标0开始检测，endsWith()从字符串最后一位下标开始检测。

值得注意的是：

当startsWith() 的第二个参数如果超出了当前字符串的最大长度，依旧生效，返回false。

当endsWith() 的第二个参数如果超出了当前字符串的最大长度，会不生效，改为从字符串最后一位下标开始检测。

需求场景： 判断字符串是否以指定字符开头或结尾

用法1： string.startsWith(searchvalue, start)

用法2： string.endsWith(searchvalue, start)

例子：

let str = "过去的时候，我们相视一笑，就已过了大半辈子"
let result1 = str.startsWith("过去")
let result2 = str.startsWith("过去",10)
let result3 = str.endsWith("半辈子")
let result4 = str.endsWith("半辈子",20)
console.log(result1); // 控制台打印：true
console.log(result2); // 控制台打印：false
console.log(result3); // 控制台打印：true
console.log(result4); // 控制台打印：false

14. 字符串长度计算 —— length

说明： length属性不仅是数组的属性，同时伪数组，字符串都有length属性。但是遇到某些生僻字如“