常用的String总结 ES5/6/7/8/9/10

第一部分介绍字符串的定义和访问

1. 字符串定义

• 使用new操作符来定义 new String

let str = new String();

• 使用 ‘ ’ 定义 数组字面量法

let str = '';

2. 字符串赋值

• 使用字符串字面量法赋值 （常用）

let str = 'a';

3. 值的访问

• 通过字符串下标的索引访问

let str = 'a';
let item = str[0]; // 'a'

• 通过charAt访问

let str = 'abcd';
console.log(str.charAt(2)); // c

• 模板字符串 [ES6新增]

// ES5
let str = 'a';
let str1 = 'hello' +  str + '!' ;
console.log(str1); // helloa'!'
 
// ES6
let str = 'a';
let str1 = `hello${str}'!'`;
console.log(str1); // helloa'!'

注：我们可以发现模板字符串相对原来的写法很简洁了些，现在的应用也比较广泛

第二部分介绍的方法不会改变原始字符串，返回一个新的值或对象

1. string.concat(string1, string2, string3)用于连接多个字符串，返回一个新的字符串

let string = 'Welcome'
let string1 = ' to ';
let string2 = 'China';
let string_new = string.concat(string1, string2);
console.log(string_new); // Welcome to China

2. [ES8新增] string.padStart(targetLength, padString) 用于从字符串的头部开始添加字符串，源字符串不发生g改变

• targetLength 表示希望填充后的字符串长度，且该方法保留原有字符串的部分
• padString 表示用来填充的字符串

let str = 'aaa';
let str1 = 'bbb';
console.log(str.padStart(2,str1)); // 'aaa' 目标长度长度 - 源字符串长度 < 0  不做理会
console.log(str.padStart(3,str1)); // 'aaa' 目标长度长度 - 源字符串长度 = 0  不做理会
console.log(str.padStart(4,str1)); // 'baaa' 目标长度长度 - 源字符串长度 = 1  只能填充一个字符进去
console.log(str.padStart(6,str1)); // 'bbbaaa' 目标长度长度 - 源字符串长度 = 3  刚好填充需要填充的字符串
console.log(str.padStart(8,str1)); // 'bbbbbaaa' 目标长度长度 - 源字符串长度 = 5  
// 填充需要填充的字符串后再重复添加直到剩余的长度为源字符串的长度
console.log(str); // 'aaa'

3. [ES8新增] string.padEnd(targetLength, padString) 用于从字符串的头部开始添加字符串，源字符串不发生改变

• targetLength 表示希望填充后的字符串长度，且该方法保留原有字符串的部分
• padString 表示用来填充的字符串

let str = 'aaa';
let str1 = 'bbb';
console.log(str.padEnd(2,str1)); // 'aaa' 目标长度长度 - 源字符串长度 < 0  不做理会
console.log(str.padEnd(3,str1)); // 'aaa' 目标长度长度 - 源字符串长度 = 0  不做理会
console.log(str.padEnd(4,str1)); // 'aaab' 目标长度长度 - 源字符串长度 = 1  只能填充一个字符进去
console.log(str.padEnd(6,str1)); // 'aaabbb' 目标长度长度 - 源字符串长度 = 3  刚好填充需要填充的字符串
console.log(str.padEnd(8,str1)); // 'aaabbbbb' 目标长度长度 - 源字符串长度 = 5  
// 填充需要填充的字符串后再重复添加直到剩余的长度为源字符串的长度
console.log(str); // 'aaa'

4. string.replace(regexp|substr, newSubStr|function) 用于返回一个由替换值替换一些或所有匹配的模式后的新字符串

• regexp 正则，用来查找需要替换的字符串
• substr 用来查找需要替换的字符串
• newSubStr 表示替换为的字符串
• function 一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果to

// 传俩个参数 一个是正则匹配regep 一个是替换为的字符串newSubStr
let reg = /apple/gi;
let str = 'apple is red';
let new_str = str.replace(reg, 'face')
console.log(new_str); // face is red

// 传俩个参数 一个是需要进行匹配的字符串substr 一个是替换为的字符串newSubStr
let reg1 = 'apple';
let str1 = 'apple is red';
let new_str1 = str1.replace(reg1, 'face');
console.log(new_str1);

// 传俩个参数 一个参数为匹配的正则 一个是对匹配后的元素进行操作的函数
function replacer(match, p1, p2, p3, offset, string) {
    // p1 is nondigits, p2 digits, and p3 non-alphanumerics
    return [p1, p2, p3].join(' - ');
}
let str2 = 'abc12345#$*%';
let reg2 = /([^\d]*)(\d*)([^\w]*)/;
let new_str2 = str2.replace(reg2, replacer);
console.log(new_str2); // abc - 12345 - #$*%
console.log(str2); // abc12345#$*%

5 . str.slice(beginIndex, endIndex) 返回截取到的字符串，提取的新字符串包括beginIndex但不包括 endIndex，原字符串不会改变

• beginIndex [必传] 开始位置 从该索引（以 0 为基数）处开始提取原字符串中的字符
• endIndex [非必传] 结束位置 从该索引（以 0 为基数）处结束提取字符串。
• 注：如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度

// 传俩个参数 均为正数
let str = 'abcdefg';
let str_r1 = str.slice(2, 6);
console.log(str_r1);// cdef 返回字符串中下标为 2 3 4 5 的字符串

// 传俩个参数 均为负数
let str_r2 = str.slice(-4, -2);
console.log(str_r2);// de 返回字符串中下标为 7-4 7-3 的字符串

// 传俩个参数 一个为正数 一个为负数
let str_r3 = str.slice(1, -2);
console.log(str_r3); // bcde 返回字符串中下标为 1 2 3 4 的字符串 从 7-2 开始的位置不需要截取

// 传一个参数 起始位置必传 所以只传起始位置
let str_r4 = str.slice(2);
console.log(str_r4); // bcdef 返回从下标为2开始到末尾位置的字符串

6. split(separator, limit) 使用指定的分隔符字符串，将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置，返回一个新的数组

• separator 分隔符[必传]
• limit 限定返回的字符串的数量[非必传]

// 传俩个参数 限定返回的数据只有俩个
let str = 'aaa,bbb,ccc';
let str_new = str.split(',', 2);
console.log(str_new); // [ 'aaa', 'bbb' ]

// 传一个参数 不限定数量
let str1 = 'aaa|bbb|ccc';
let str_new1 = str1.split('|');
console.log(str_new1); // [ 'aaa', 'bbb', 'ccc' ]

7. string.substr(start, length) 从下标为start的位置开始截取字符串，且满足截取的字符串长度为length

• 注：目前不推荐使用这个方法，因为js在考虑去除这个方法，我们可以用substring来替代

8. string.substring(start, end) 返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集

• indexStart [必传] 需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母

• indexEnd [非必传] 一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内

// 传俩个参数 
let  str = 'abcabc';
let str_new = str.substring(1, 3);
console.log(str_new); // bc

// 传一个参数
let str_new1 = str.substring(1);
console.log(str_new1); // bcabc

9. string.toUpperCase() 将当前的字符串转换为全部为大写的字符串，并返回这个字符串

let str = 'AC';
let str_new = str.toLowerCase();
console.log(str_new); // ac
console.log(str); // AC

10. string.toLowerCase()

let str1 = 'ac';
let str_new1 = str.toUpperCase();
console.log(str_new1); // AC
console.log(str1); // ac

11. string.trim() 去掉首尾的空格 并返回这个新的字符串

let str = " aaa ";
let str_new = str.trim();
console.log(str_new); // 'aaa'
console.log(str); // ' aaa'

12. string.trimStart() [ES10新增]方法从字符串的开头删除空格。trimLeft()是此方法的别名

let str_start = str.trimStart();
console.log(str_start); // 'aaa '

13. string.trimEnd() 方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名

let str_end = str.trimEnd();
console.log(str_end); // ' aaa'

14. string.repeat(count) 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本

• count [必传] 需要重复的数量，不传返回空

let str = 'abc';
let str_new = str.repeat(2);
console.log(str_new); // abcabc

第三部分介绍的方法是基于对字符串的遍历常用于做判断或者查找的方法

1. string.indexOf(element) 从字符串的头开始查找元素element 遇到即返回元素的下标 但是如果一直没找到就返回-1

• element [必传] 要查询的元素

let str = 'abcde';
let i = str.indexOf('a');
console.log(i); // 0

let i1 = str.indexOf('f');
console.log(i1); // -1

2. string.lastIndexOf(element) 从字符串的尾部开始查找元素element，遇到即返回元素的下标，一直未找到就返回-1 所以当需要查找的元素在字符串中超过一个时就会有很大的区别

• element [必传] 需要查找的字符串

// string.lastIndexOf(x) 返回字符串中是否存在x 有就返回下标值  无返回-1
let str = 'abcde';
let i = str.lastIndexOf('a');
console.log(i); // 0

let i1 = str.lastIndexOf('f');
console.log(i1); // -1

// 与indexOf的区别就是一个是从头开始 一个是从末尾开始
let str2 = 'aabbcc';
let i_indexOf = str2.indexOf('a');
console.log(i_indexOf); // 0 如果是从头开始找 那么找到的第一个a的下标是0
let i_lastIndexOf = str2.lastIndexOf('a');
console.log(i_lastIndexOf); // 1 如果是从末尾开始找 那么找到的第一个a的下标是1

3. string.startsWith(searchString, position) 从psition位置开始判断 判断是否以searchString开头

• searchString [必传] 要匹配的子字符串
• position [非必传] 开始进行匹配的字符串

let str = 'aaabbbccc';
// 传一个参数 
let str_new = str.startsWith('a');
console.log(str_new); // true

// 传俩个参数
let str_new1 = str.startsWith('b', 3);
console.log(str_new1); // true

4 string.endsWith(searchthing, length) 判断字符串的子串[0, length-1]是否以searchthing结尾,length不传的情况下为默认为字符串长度，是则返回true，否则返回false

• searchString [必传] 要匹配的子字符串
• length [非必传] 子串的长度，比如3，则子串为string[0-2]

// 传一个参数
let str = 'aabbcc';
let str_new = str.endsWith('c');
console.log(str_new); // true

// 传俩个参数
let str_new1 = str.endsWith('b', 4);
console.log(str_new1); // true

5. string.match(reg) 返回一个字符串，包含符合reg正则匹配的子集

• reg [正则] 如果不传正则就会返回一个空数组，如果传非正则会隐式的转为正则对象

let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
let regexp = /[A-E]/gi;
let matches_array = str.match(regexp);
console.log(matches_array);
// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

6. string.search(reg) 返回一个数字值，若找到符合正则表达式的子集，则返回子集开始的下标，没找到返回-1；

注意，这里与上面的match不同的是这里是只返回匹配到的第一个，找到即返回

let str = "hey JudE";
let re = /[A-Z]/g;
let re2 = /[.]/g;
console.log(str.search(re)); // returns 4, which is the index of the first capital letter "J"
console.log(str.search(re2)); // returns -1 cannot find '.' dot punctuation