前端开发，字符串方法总结

本篇文章在工作中持续总结，方法有简单的，有实用的，但都是有效的，都是为了更好的开发，希望对各位读者有所帮助，不妨点赞，关注，收藏下，就当作是个字典表，方便随时翻阅。如有笔误，还请评论中指出，如有疑问可在下方评论。有其他好的方法，还希望在评论中多多交流，笔者也会持续增加新的方法。

所含方法

• replace
• split
• padStart
• padEnd
• sbustr（start, len）
• substring(start, end)
• charAt()
• charCodeAt()
• indexOf
• trim
• repeat
• includes
• toUpperCase
• toLowerCase

replace()

基本用法

js中字符串的replace方法用于替换字符串中指定的字符，基本用法如下：

str.replace(regexp|substr, newSubStr|function)

let str = 'Tom is my best friend.'

let targ = str.replace('Tom', 'money')
console.log(targ) // 'money is my best friend'

然而，当要替换的字符有多个时，上面方式往往只会替换第一个匹配到的字符。

let str = 'my friend is not your friend'

let targe = str.replace('friend', 'money')
console.log(targe) // 'my money is not your friend'

因此要全局替换时，需要使用正则

let str = 'my friend is not your friend'
// ①
let targe = str.replace(new RegExp('friend', 'g'), 'money')
// ②简写
let targe = str.replace(/friend/g, 'money')
console.log(targe) // 'my money is not your money'

split()

split根据传入的参数拆分字符串，并将拆分后的结果以数组的形式返回。简单使用：

let re = '赚,钱'.split(',')
console.log(re)  // [ '赚', '钱' ]

关于split的参数形式有很多，可以不传，传空，传正则：

var names = "Harry Trump ;Fred Barney";
var re = /\s*(?:;|$)\s*/;
var nameList = names.split(re);
console.log(nameList); // [ 'Harry Trump', 'Fred Barney' ]

以及经典的字符串逆序，也是使用了split：

const str = 'abcd';
const strReverse = str.split('').reverse().join(''); // 'dcba'

关于第二个参数，限制返回值中分割元素的数量：

let re = 'abcd'.split('', 2) 
console.log(re) // ['a', 'b']

padStart() / padEnd()

关于padStart/padEnd为ECMAScript 2017(ES8)的新增特性，分别为在字符串的前面和后面填充字符串到指定长度

let str = '10'
let re = str.padStart(4,0)
console.log(re, str) // 0010, 10

该方法返回一个新的字符串，原字符串不变。padEnd与之类似

let str = '10'
let re = str.padEnd(4,1)
console.log(re, str) // 1011, 10

关于参数的说明

• 第一个参数指定修改后的字符串长度，第二个参数为填充内容单位。
• 当第一个参数值小于字符串长度时，字符串不作修改

let str = '1010'
console.log(str.padEnd(3,1)) // 1010

• 对于不支持该方法的编译环境，可以通过以下代码手动实现：

if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength,padString) {
        targetLength = targetLength>>0; //floor if number or convert non-number to 0;
        padString = String((typeof padString !== 'undefined' ? padString : ' '));
        if (this.length > targetLength) {
            return String(this);
        }
        else {
            targetLength = targetLength-this.length;
            if (targetLength > padString.length) {
                padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
            }
            return padString.slice(0,targetLength) + String(this);
        }
    };
}

来源于MDN

sbustr() / substring()

描述：sbustr与substring比较类似

• 相同点：当两者都是一个参数的时候，返回值为字符串该参数位置到末尾的字符串

let str = 'eqwsvwefrw12312fewf'
let sbustrStr = str.sbustr(3)
let substringStr = str.substring(3)
console.log(sbustrStr,substringStr) // 'svwefrw12312fewf'

• 不同点：当两者都接收两个参数时，sbustr返回值是以参数1为起始位置，参数2为长度的字符串

let srt = 'asdo9djsdad'

let re = srt.substr(4,6)
console.log(re) // '9djsda'

• 而substring则返回以参数1为起始位置，参数2为结束位置的字符串

let srt = 'asdo9djsdad'

let re = srt.substring(4,6)
console.log(re)   //  '9d'

charAt()

• charAt(index): 参数：一个介于0 和字符串长度减1之间的整数。 (0~length-1)
  如果没有提供索引，charAt() 将使用0。

let str = 'hello world'
console.log(str.charAt(1))  //3

console.log(str.charAt(20) // ''

charCodeAt()

返回 0 到 65535 之间的整数表示给定索引处的UTF-16代码单元。及返回指定处字符的unicode编码

let str = 'abc'
console.log(str.charCodeAt(1)) //  98

如此一看是否并没有多大实际用途，那在看一个例子

let str = 'a我bc'
console.log(str.charCodeAt(1)) // 25105

在unicode编码中，大于255的为中文字符，因此，在判断字符串中是否中文的时候，该方法就特别实用了

indexOf()

indexOf() 方法返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。

str.indexOf(searchValue, index)

// 如果只传一个参数，则默认从0开始。
// 如果字符串中存在目标值，返回出现的位置，否则返回-1

let str = 'abc'

console.log(str.indexOf('a'))  // 0
console.log(str.indexOf('e'))  // -1

console.log(str.indexOf(''))  // 0  ()
console.log(str.indexOf('', 1) // 

trim()

该方法的作用是删除字符串两端的空白字符串

let str = ' abc '
console.log(str) // ' abc '
console.log(str.trim())  //  'abc'

repeat()

重复字符串，接收一个参数，指定字符串重复的次数

let str = 'abc'
console.log(str.repeat(3)) //  'abcabcabc'

includes()

类似于数组的includes方法，字符串的该方法也通过判断是否存在该字符返回true/false

let str = 'acccd'

console.log(str.includes('a'))  // true

console.log(str.includes('e')) // false

toLowerCase() 与 toUpperCase()

关于这两个方法，就放在一起写，好形成对比

• toUpperCase(): 将字符串转换为大写字母
• toLowerCase(): 将字符串转换为小写字母
• 两个方法都返回一个新的字符串，原字符串不变

let str = 'aBcD'

console.log(str.toUpperCase()) //  ABCD

console.log(str.toLowerCase()) // abcd