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

作为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属性。但是遇到某些生僻字如“?”或者表情符号“?”，它们的length为2，这时候返回的length可能不是我们真正想要的。这是因为js字符串是由16位的代码单元组成，而不是由Unicode代码点组成。同时js使用两个代码单元表示216及其以上的Unicode代码点。这两个代码单元被称为代理对。一个代码单元被默认为1个长度单位，像“?”或者“?”是由两个代码单元组成的代理对，因此它们的length为2。

需求场景： 求出当前字符串长度

用法： string.length

例子：

let str = "相约白头偕老，你却悄悄秃了头"
let result = str.length
console.log(result) // 控制台打印：14

15. 字符串截取 —— substr() 和 slice() 和 substring()

说明： 字符串截取和拼接是字符串最常用也是最易错的方法。主要原因是 substr() 、 slice() 和 substring()的区别有很多小伙伴还不太明白。由于详细内容较多，我新开了一篇文章来写它们的区别：《看完就懂系列》字符串截取方法substr() 、 slice() 和 substring()之间的区别和用法]()

substr()：

slice() ：

substring() ：

需求场景： 截取指定下标指定长度的字符串

用法1： string.substr(start,length)

用法2： string.slice(start,end)

用法3： string.substring(start,end)

例子：

let str = '0123456789'
let result1 = str.substr(2,5) // 从下标2开始截取，截取5位
let result2 = str.slice(2,5)  // 从下标2开始截取，截取到下标5（不含下标5）
let result3 = str.substring(2,5) // 从下标2开始截取，截取到下标5（不含下标5）

console.log(result1) // 控制台打印：23456
console.log(result2) // 控制台打印：234
console.log(result3) // 控制台打印：234

总结

这就是关于字符串常用的15个方法详细说明，可在我们工作中的很多时候，可能并不能很好的使用它们。大多是因为不够熟练，看一遍容易忘记，所以我们要时常翻一翻这些常用的方法，也许就能节省你工作中几十分钟~ 为摸鱼大业添砖加瓦 ~