前端字符串方法汇总

1、length属性

javascript 复制代码

const sss = 'length'
    console.log('字符串长度是', sss.length)

2、chartAt()

charAt()和charCodeAt()方法都可以通过索引来获取指定位置的值：

charAt() 方法获取到的是指定位置的字符；

charCodeAt()方法获取的是指定位置字符的Unicode值。

javascript 复制代码

console.log('e的相应的位置呢', sss.charAt('e'))
console.log('相应的Unicode', sss.charCodeAt('e'))

3、检索字符串是否包含特定序列

这5个方法都可以用来检索一个字符串中是否包含特定的序列。其中前两个方法得到的指定元素的索引值，并且只会返回第一次匹配到的值的位置。后三个方法返回的是布尔值，表示是否匹配到指定的值。

indexOf()

indexOf()：查找某个字符，有则返回第一次匹配到的位置，否则返回-1，其语法如下：

javascript 复制代码

console.log('获取相应的位置', sss.indexOf('e'))

lastIndexOf()

lastIndexOf()：查找某个字符，有则返回最后一次匹配到的位置，否则返回-1

javascript 复制代码

console.log('获取相应的最后的位置', sss.lastIndexOf('e'))

includes()

includes()：该方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。该方法的语法如下：

javascript 复制代码

console.log('获取相应的字符串是否存在', sss.includes('en'), sss.includes('ao'))

console.log('获取相应的字符串是否存在', sss.includes('en', 8))  // 8为起始位置

startsWith()

startsWith()：该方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true，否则 false。其语法和上面的includes()方法一样。

javascript 复制代码

console.log('startsWith获取相应的字符串是否存在', sss.startsWith('le'), sss.startsWith('ao'))

console.log('startsWith获取相应的字符串是否存在', sss.startsWith('g', 3)) // 3为起始位置

endsWith()

endsWith()：该方法用来判断当前字符串是否是以指定的子字符串结尾。如果传入的子字符串在搜索字符串的末尾则返回 true，否则将返回 false。其语法如下：

javascript 复制代码

console.log('endsWith获取相应的字符串是否存在', sss.endsWith('e'), sss.endsWith('h', 5), sss.endsWith('h', 4))

4. 连接多个字符串

concat() 方法用于连接两个或多个字符串。该方法不会改变原有字符串，会返回连接两个或多个字符串的新字符串。其语法如下：

javascript 复制代码

console.log('连接字符串', sss.concat('a', 'b', 'c', 'e', 'f', 'm'))

虽然concat()方法是专门用来拼接字符串的，但是在开发中使用最多的还是加操作符+，因为其更加简单。

5. 字符串分割成数组

split() 方法用于把一个字符串分割成字符串数组。该方法不会改变原始字符串。其语法如下：

string.split(separator,limit)

该方法有两个参数：

separator：必需。字符串或正则表达式，从该参数指定的地方分割 string。
limit：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

javascript 复制代码

console.log('字符串获取相应的数组', sss.split('g'), sss.split('', 3), sss.split(''))

javascript 复制代码

const list = 'apples,bananas;cherries'
    const fruits = list.split(/[,;]/)
    console.log(fruits)

6、截取字符串

substr()、substring()和 slice() 方法都可以用来截取字符串。

（1） slice()

slice() 方法用于提取字符串的某个部分，并以新的字符串返回被提取的部分。其语法如下：

javascript 复制代码

console.log('slice使用', sss.slice(1, 2))

（2） substr()

substr() 方法用于在字符串中抽取从开始下标开始的指定数目的字符。其语法如下：

javascript 复制代码

console.log('substr使用', sss.substr(1, 2))

（3） substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。其语法如下：

javascript 复制代码

console.log('substring使用', sss.substring(1, 2))

7. 字符串大小写转换

toLowerCase() 和 toUpperCase()方法可以用于字符串的大小写转换。

javascript 复制代码

const bbbb = 'abcEDFhi'
    console.log('toLowerCase与toUpperCase', bbbb.toLowerCase(), bbbb.toUpperCase())

8. 字符串模式匹配

replace()、match()和search()方法可以用来匹配或者替换字符。

（1）replace()

replace()：该方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。其语法如下：

javascript 复制代码

const str = 'Mr Blue has a blue house and a blue car'
    console.log('replace', str.replace(/blue/gi, 'red'))

（2）match()

match()：该方法用于在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。其语法如下：

javascript 复制代码

const str1 = 'abcdef'
    console.log(str1.match('c'))

（3）search()

search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。其语法如下：

javascript 复制代码

const str2 = 'abcdef'
    console.log(str2.search(/bcd/)) // 输出结果：1

9. 移除字符串收尾空白符

trim()、trimStart()和trimEnd()这三个方法可以用于移除字符串首尾的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。

（1）trim()

trim() 方法用于移除字符串首尾空白符，该方法不会改变原始字符串：

javascript 复制代码

const list2 = ' acb '
    console.log('trim', list2.trim(), list2.trim().length)

（2）trimStart()

trimStart() 方法的的行为与trim()一致，不过会返回一个从原始字符串的开头删除了空白的新字符串，不会修改原始字符串：

javascript 复制代码

const list2 = ' acb '
    console.log('trim', list2.trim(), list2.trim().length, list2.trimStart(), list2.trimStart().length)

（3）trimEnd()

trimEnd() 方法的的行为与trim()一致，不过会返回一个从原始字符串的结尾删除了空白的新字符串，不会修改原始字符串：

javascript 复制代码

const list2 = ' acb '
    console.log('trim', list2.trim(), list2.trim().length, list2.trimStart(), list2.trimStart().length, list2.trimEnd(), list2.trimEnd().length)

10. 获取字符串本身

valueOf()和toString()方法都会返回字符串本身的值，感觉用处不大。

（1）valueOf()

valueOf()：返回某个字符串对象的原始值，该方法通常由 JavaScript 自动进行调用，而不是显式地处于代码中。

javascript 复制代码

let str = "abcdef"
console.log(str.valueOf()) // "abcdef"

（2）toString()

toString()：返回字符串对象本身

javascript 复制代码

let str = "abcdef"
console.log(str.toString()) // "abcdef"

11. 重复一个字符串

repeat() 方法返回一个新字符串，表示将原字符串重复n次：

javascript 复制代码

'x'.repeat(3)     // 输出结果："xxx"
'hello'.repeat(2) // 输出结果："hellohello"
'na'.repeat(0)    // 输出结果：""

javascript 复制代码

'na'.repeat(2.9) // 输出结果："nana"

javascript 复制代码

'na'.repeat(Infinity)   // RangeError
'na'.repeat(-1)         // RangeError

12. 补齐字符串长度

padStart()和padEnd()方法用于补齐字符串的长度。如果某个字符串不够指定长度，会在头部或尾部补全。

（1）padStart()

padStart()用于头部补全。该方法有两个参数，其中第一个参数是一个数字，表示字符串补齐之后的长度；第二个参数是用来补全的字符串。

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串：

javascript 复制代码

'x'.padStart(4, 'ab') // 'abax'

padStart()的常见用途是为数值补全指定位数，笔者最近做的一个需求就是将返回的页数补齐为三位，比如第1页就显示为001，就可以使用该方法来操作：

javascript 复制代码

"1".padStart(3, '0')   // 输出结果： '001'
"15".padStart(3, '0')  // 输出结果： '015'

（2）padEnd()

padEnd()用于尾部补全。该方法也是接收两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串：

javascript 复制代码

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

13. 字符串转为数字

parseInt()和parseFloat()方法都用于将字符串转为数字。

（1）parseInt()

parseInt() 方法用于可解析一个字符串，并返回一个整数。其语法如下：

该方法有两个参数：

string：必需。要被解析的字符串。
radix：可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

javascript 复制代码

console.log(parseInt('10'))	 // 输出结果：10
    console.log(parseInt('17',8))	// 输出结果：15 (8+7)
    console.log(parseInt('010')) // 输出结果：10 或 8

（2）parseFloat()

parseFloat() 方法可解析一个字符串，并返回一个浮点数。该方法指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。其语法如下：

javascript 复制代码

console.log(parseFloat('10.00')) // 输出结果：10.00
    console.log(parseFloat('10.01')) // 输出结果：10.01
    console.log(parseFloat('-10.01')) // 输出结果：-10.01
    console.log(parseFloat('40.5 years')) // 输出结果：40.5