前言:
在平常的数据解析中，数组，字符串，对象是必不可少的三种类型，今天就字符串的一些常用方法做一个整理，每个方法对应都会相应的示例，不仅是为了能够让大家一目了然，节约时间，更是为了以后自己以后也方便查阅！ （在下面的方法中，有解析错误的地方，还望大家提出意见或建议，感谢！）
更新日期：2022-12-20
0、从原始字符串到模版字面量
模版字面量：
`hello world` `hello! world!` `hello ${who}` escape `<a>${who}</a>`
（1.）我们原来使用的字符串：
字符串不区分单引号' '和双引号" "所有的字符串拼接都会识别，如果你的字符串比较长，可分行使用“+”来拼接。
例如：
let longString = "This is a very long string which needs " +
"to wrap across multiple lines because " +
"otherwise my code is unreadable.";
console.log(longString);
// "This is a very long string which needs to wrap across multiple lines because otherwise my code is unreadable."
或者也可以使用 "\" 来告诉浏览器，你需要继续写这个字符串，但需要保证 "\"后面是没有任何符号或者是空格的；
例如：
let longString = "This is a very long string which needs \
to wrap across multiple lines because \
otherwise my code is unreadable.";
console.log(longString)
// "This is a very long string which needs to wrap across multiple lines because otherwise my code is unreadable."
以前，我们用单引号或双引号表示字符串。
let a = '123'; //单引号
let b = "123"; //双引号
（2.）我们现在使用的模板字面量:
现在，使用模板字面量反撇号` `。在实际开发中，这是经常都要用到的方法。
let c = `123` //反撇号
在字符串中使用反撇号，只需要加上转义符 ，这时中间的 `，没有什么意义：
let d = `12\`3` //字符串内插入反撇号的方式。 // "12`3"
在多行字符串的使用价值：
在没有模板字面量的时候，我们要实现多行字符串，必须用到换行符：
let a = '123\n456';
console.log(a);
// 123
// 456
使用模板字面量，就可以非常简单的实现需求。
let a = `123
456`;
console.log(a) // 123
// 456
在模板字面量插入变量的方法
在原来的我们要在字符串中拼接变量，需要用‘+变量+’或者 + 来实现，而现在 而是使用${params}直接插入你需要添加到字符串的位置。这种方式也叫作字符串占位符。占位符支持互相嵌套模板字面量，强大吧。有了它，我们终于可以抛弃 + 拼接字符串的恶心做法了。
字符串和变量拼接：
var str=`xiaoming`;
console.log(`wo shi ${str}`) // wo shi xiaoming
变量和变量拼接：
var str0=`wo shi `;
var str=`xiaoming`;
console.log(`${str0}${str}`) // wo shi xiaoming
1、charAt() 根据下标查询访问字符串的某个字符
在1个字符串中，我们知道某个字符的索引值，那么就可以通过索引值来获取当前字符
例如：
var str1=`age`;
console.log(str1.charAt(2)) // e
// 还可以使用 [ ] 的形式来访问,中括号填写的是字符串的下标
var str1=`age`;
console.log(str1[2]) // e
2、字符串的比较">" , "<" ,"===" ,">=" ,"<=" ,"!=="
(1).字母字符串比较，会先转成ascii码，再进行比较
var str1=`aa`;
var str2=`bb`;
console.log(str1<str2) // true
(2).数字字符串比较（会比较两个数字的大小）
var str1=`10`;
var str2=`15`;
var str3=`10`;
console.log(str1<str2,str1===str3) // true,true
3、字符串的长度 length
在我们之前只使用过数组的length来判断，更改，清空数组等，这次我们来看一下字符串的length。
例如：
var str="我爱你中国";
console.log(str.length) // 5
string 的length 是只读属性,下面我们做一下验证：
var str=`This is an apple`;
console.log(str.length) // 16
str.length=5;
console.log(str.length) // 16
4、charCodeAt(index) 返回表示给定索引的字符的Unicode的值。
方法返回0到65535之间的
UTF-16编码单元匹配Unicode编码单元整数，当charCodeAt()括号中没有值时，默认为查询字符串首位的位置;当有参数时，查询的是字符串的索引值，index的值为一个大于等于 0，小于字符串长度的整数。
例：
var str="abc";
console.log(str.charCodeAt()) // 97
var str="abc";
console.log(str.charCodeAt(0)) // 97
结果都是一样的，查询到"a"在编码中的位置为97
var str="abc";
console.log(str.charCodeAt(1)) // 98
字母"b"在编码中的位置为98
5、str.concat（str1,str2....）字符串拼接
在字符串拼接中，最常用的还是“+”；
var str = "d";
var str1 = "e";
var str2 = "f";
var str3 = str+str1+str2;
console.log(str3) // "def"
当然我们也可以使用concat(....)
var str1 = "a";
var str2 = "b";
var str3 = "c";
console.log(str1.concat(str2,str3)) // "abc"
更高级的方法就是使用我们ES6的模版字面量来操作：
var str=`xiaoming`;
console.log(`wo shi ${str}`) // wo shi xiaoming
6、includes（str）检测一个字符串是否在另一个字符串里包含，区分大小写
例：
我们测试def 是否在字符串str中
var str="abcdef";
console.log(str.includes("def")); // true
而我们把“def”换成大写的“DEF”时，并不能检测到
var str="abcdef";
console.log(str.includes("DEF")); // false
7、endsWith(str) 检测字符串是不是以“str”结尾的
str.endsWith(searchString, length);
searchString 要搜索的子字符串。
length 在 str 中搜索 searchString 的结束位置
length 当不填写值时，默认值为str.length，也就是真正的字符串结尾处，从下标为0的字符开始，空格和符号也算字符。 也是开始的位置。
例：
1、当没有第二个参数时。默认第二个参数为字符串的length
var str = "To be, or not to be, that is the question.";
console.log(str.endsWith("question.")) // true
2、 当有第二个参数的时候，代表字符串的长度为几，而结束的位置就是包含这个长度的位置
var str = "To be, or not to be, that is the question.";
console.log(str.endsWith("T",1)) // true;
3、第二个参数的计算是包含空格和标点符号的
var str = "To be, or not to be, that is the question.";
console.log(str.endsWith("To be", 5)) // true
8、str.indexOf()方法返回str查找的结果，如果是有返回指定索引（查找到结果的第一次出现的位置），如果没有返回-1，区别大小写
例：
"ABC".indexOf("A") // 0 查询到“A”,返回位置为索引“0”
"ABC".indexOf("e") // -1 并没有查询到“e”,返回-1
"ABC".indexOf("AB") // 0 如果查询连续字符，返回连续字符的首位位置
检测是否存在某字符串:
当检测某个字符串是否存在于另一个字符串中时，可使用下面的方法：
"Blue Whale".indexOf("Blue") !== -1; // true
"Blue Whale".indexOf("Bloe") !== -1; // false
使用
indexOf统计一个字符串中某个字母出现的次数 在下例中，设置了count来记录字母e在字符串str中出现的次数：
var str = 'To be, or not to be, that is the question.';
var count = 0;
var pos = str.indexOf('e');
while (pos !== -1) {
count++;
pos = str.indexOf('e', pos + 1);
//重新给pos赋值，从上个查询到str的位置+1的位置继续查找，如果能查到就会再进循环，count+1
}
console.log(count); // 4
9、lastIndexOf()方法返回指定值在调用该方法的字符串中最后出现的位置，如果没找到则返回-1
str.lastIndexOf(searchValue[, fromIndex])
参数:
searchValue 一个字符串，表示被查找的值。
fromIndex 开始查找的下标位置。可以是任意整数。默认值为 str.length。如果为负值，则被看作 0。如果 fromIndex > str.length，则 fromIndex 被看作 str.length。
例： 当只有一个参数的时候，第二个值默认str.length,也就是查询整个字符串，查找到这个str在整个字符串中最后出现的位置
"AVBDHIUOKL".lastIndexOf("O"); //7
"AFGHJKLL:JJHKAJALKA".lastIndexOf("A"); //18
当有第二个参数时，第二个参数会被看成查询这个字符串的结束位置
//从0到第10个索引值时，只在0的位置查询到"A",所以返回0
"AFGHJKLL:JJHKAJALKA".lastIndexOf("A",10); // 0
//从0到第15个索引值时，在第15的位置查询到"A",所以返回15
"AFGHJKLL:JJHKAJALKA".lastIndexOf("A",15); // 15
10、str.repeat(count)构造并返回一个新字符串，该字符串是循环完成后的新字符串
repeat(count)的值一般为数字，就好比"a".repeat(5)=="a"*5=="aaaaa",
但也会出现其他情况，例如以下：
1.当值为“-1”时，会报错，所以值不能为负数。
"abc".repeat(-1)
// RangeError: repeat count must be positive and less than inifinity
2.那我们值为“0”时，会有什么情况呢？将不会循环，返回一个空字符串。
"abc".repeat(0) // ""
3.那么我们接下来输入一个正常的数字“1”，repeat给我们返回了"abc"*1的结果,它将循环一遍。
"abc".repeat(1) // "abc"
4.那么我们试试“2”，看看会不会返回循环两次，确实它返回了字符串循环两遍的结果。
"abc".repeat(2) // "abcabc"
5.那我们来试试小数，看看是循环几次呢，结果是它将小数点后面的抹去了，只循环了前面的数字。
"abc".repeat(3.5) // "abcabcabc" 参数count将会被自动转换成整数.
6.那我们试试“1/0 ”，并没有解析出来，因为1/0==inifinity
"abc".repeat(1/0)
// RangeError: repeat count must be positive and less than inifinity
7.那我们再来试试字符串呢？结果它将字符串自动转为了number,并正确循环并返回了。
"abcd".repeat("2") // "abcabc"
8.看看它是否能解析中文汉字呢？ 结果是并没有，也没有报错。
"abcd".repeat("二") // ""
11、str.slice(beginSlice,endSlice)截取字符串，第一个参数为开始位置，第二个参数为结束位置，前包后不包
1.slice() 从一个字符串中提取字符串并返回新字符串。在一个字符串中的改变不会影响另一个字符串。也就是说，slice不修改原字符串，只会返回一个包含了原字符串中部分字符的新字符串。
var str = "avxdsdfasd";
var str2 = str.slice(1, 4);
console.log(str,str2) // "avxdsdfasd","vxd"
2.注意：slice() 提取的新字符串包括beginSlice但不包括 endSlice。
var str = "aexdsdfasd";
var str2 = str.slice(0,2);
console.log(str2) //"ae"
3.提取新字符串从第二个字符到第四个 (字符索引值为 1, 2, 和 3)。
"avxdsdfasd".slice(1, 4) //"vxd"
4. 提取第三个字符到倒数第二个字符。-1为倒数第一个。
"abckdesdf".slice(2, -1) //"ckdesd"
5.当开始的值和结束的值都为负数时,结果会从后向前数，从-3到-1之间的值（前包后不包）
"abckdesef".slice(-3, -1) //"se"
12、str.split()方法，使用指定的分隔符字符串将一个string对象分割成字符串数组
1.当括号中为空值时，直接将它转为字符串数组
console.log("abcdefg".split()); // ["abcdefg"]
2.当括号中为空引号时，它将每个字符串都分割了出来
console.log("abcdefg".split("")); // ["a", "b", "c", "d", "e", "f", "g"]
当在空引号中加上一个空格时，它会以你原字符串的空格来分割
"Webkit Moz O ms Khtml".split( "" ) // ["Webkit", "Moz", "O", "ms", "Khtml"]
3.当括号中为字符串中的字母，它将以当前字母分割字符串
console.log("abcdefg".split("a")); // ["", "bcdefg"]
console.log("abcdefg".split("b")); // ["a", "cdefg"]
4.当括号中字符串并不是当前字符串中包含的，它只接转成数组字符串，不做其他操作
console.log("abcdefg".split("bbbb")); // ["abcdefg"]
13、startsWith()检测字符串是不是以“str”开头的，根据判断返回true,false(ES6新添，与endsWith相反)
str.startsWith(searchString [, position]);
参数:
searchString 要搜索的子字符串。
position 在`str`中搜索`searchString`的开始位置，默认值为 0，也就是真正的字符串开头处。
var str = "To be, or not to be, that is the question.";
console.log(str.startsWith("To be")) // true
console.log(str.startsWith(" be")) //false
console.log(str.startsWith("not to be", 10)) // true
14、str.substr()方法返回一个字符串中从指定位置开始到指定字符数的字符。
str.substr(start[, length])
start:开始截取的位置，开始索引为0，最大为str.length-1，也可为负数；
length:要截取的长度，如果不填写，默认为str.length-1;最小为1，最大为str.length-1.负数无效，如果为0或者负值，返回一个空字符串。
var str = "abcdefghij";
1.当两个值都为正值，且都在范围之内：
console.log("(1,2): " + str.substr(1,2)); // (1,2): bc
2.当截取位置为负数时，会从后向前数，倒数第一个索引为-1，截取的长度会从当前位置向后数
console.log("(-3,2): " + str.substr(-3,2)); // (-3,2): hi
3.当只有开始位置的值，并且为负值时，会从当前位置，截取到字符串的末尾
console.log("(-3): " + str.substr(-3)); // (-3): hij
4.当只有开始的位置，为正值，第二个值默认是str.length-1,也就是截取到字符串的末尾
console.log("(1): " + str.substr(1)); // (1): bcdefghij
5.当开始的索引是超过字符串长度的负数时，就相当于字符串一直是从后向前数的
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
6.当开始的索引是超过字符串的长度的正值时，无法截取到内容，返回空字符串
console.log("(20, 2): " + str.substr(20,2)); // (20, 2):""
15、str.substring()截取开始位置和结束位置之间的字符串，前包后不包
str.substring(start,stop)
start:开始截取的位置，不为负数；
stop：结束的截取位置，不为负数；
当参数为负数时，不识别，默认转为0；当第二个值为负数时，默认转为0，,并调换开始和结束的两个值的位置，
var str= "abcdefghij";
1.当开始和结束都为正值，并都在范围内，从索引为1的位置截取到索引为2的位置；
console.log("(1,2): " + str.substring(1,2)); // (1,2): b
2.当只有一个开始位置的值时，会从开始位置直接截取到结束位置；
console.log("(1): " + str.substring(1)); // (1): bcdefghij
3.当开始位置为负数时,会直接转为0来截取；
console.log("(-1): " + str.substring(-1)); // (-1): abcdefghij
4.当结束位置超过字符串的长度，会默认忽略第二个参数；
console.log("(1,20): " + str.substring(1,20)); // ((-1): bcdefghij
5.当结束位置为负数，会直接转为0，并交换开始和结束的位置；
console.log("(1,-5): " + "sdsdfsdf".substring(1,-5));// ((1,-5): s
6.当开始位置和结束位置的值为同一值时，返回空字符串
console.log("(1,1): " + "sdsdfsdf".substring(1,1)) ; // ((1,1): ""
16、str.toLowerCase()将字符串转为小写的形式（并不会影响字符串本身的值）
console.log("ABC".toLowerCase()); // "abc"
17、str.UpperCase()将字符串转为大写的形式（并不会影响字符串本身的值）
console.log( "alphabet".toUpperCase() ); // "ALPHABET"
18、obj.toString()方法用于将现有的对象转为字符串；
1.数组转字符串；
console.log( [1,2,3,4,5].toString()); //"1,2,3,4,5"
2.对象转字符串，将会返回[object Object]，故不支持转换
var a={a:1,b:2};
console.log( a.toString()); // [object Object]
19、str.trim()方法会从一个字符串的两端删除空白字符，在这个上下文中的空白字符是所有的空白字符（space（空格键)，tab,no-break``space等）以及所有行终止字符（如LF，CR）。
trim()方法并不会影响原字符串，会返回一个新字符串。
例： 1.当字符串两侧都有空格时，会全部删除
var orig = ' foo ';
console.log(orig.trim()); // 'foo'
2.当字符串单侧有空格，则就从单侧删除
var orig = 'foo ';
console.log(orig.trim()); // 'foo'
20、String.fromCharCode(num1,num2,、、numN)用于返回当前Unicode数字所对应的字符
String.fromCharCode(num1, ..., numN)
参数
num1, ..., numN 一组序列数字，表示 Unicode 值。
该方法返回一个字符串，而不是一个 String 对象。 由于
fromCharCode是String的静态方法，所以应该像这样使用：String.fromCharCode()，而不是作为你创建的String对象的方法。
例：
console.log(String.fromCharCode(65,66,67)); //"ABC"
21、replace 字符串的替换
文章写到这里竟然忘了一个超好用的方法：
replace，用于替换指定的字符串。
str.replace('a','b')
第一个参数是需要被替换的字符串规则,可以是普通字符串，也可以是正则规则，第二个参数是要替换成的内容。
例：
- 普通字符串
let str ="abcdefg";
let str1 = str.replace('abc','def');
console.log(str1) // defdefg
- 正则匹配
let text = "javascript Tutorial";
console.log(text.replace(/javascript/i, "JavaScript"));
22. parseFloat 解析字符串，返回一个浮点数
注意：
- 当字符串中有多个数字，字符串中只返回第一个数字
- 开头和结尾的空格是被忽略的
- 如果字符串的第一个字符不能被转为数字，则返回
NaN
例：
parseFloat("10") // 10
parseFloat("11 44 66") // 11
parseFloat(" 60 ") // 60
parseFloat("40 years") //40
parseFloat("i have 40") // NaN
parseFloat("11.00") // 11
parseFloat("11.03434") // 11.03434
23. trimStart 和 trimEnd 删除前后空格，不会影响原数组
trimStart()方法从字符串的开头删除空格。trimLeft()是此方法的别名。
const greeting = ' Hello world! ';
console.log(greeting.trimStart()); // 'Hello world! ';
console.log(greeting.trimLeft()); // 'Hello world! '
trimEnd()方法从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。
const greeting = ' Hello world! ';
console.log(greeting.trimEnd()); // " Hello world!";
console.log(greeting.trimRight()); // " Hello world!";
24. padStart 和 padEnd 填充字符串
padStart()方法用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。padEnd()用于尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
作者：晴天de雨滴
出处：https://juejin.im/post/6844903512493539341
版权所有，欢迎保留原文链接进行转载：)
如果你对我对文章感兴趣或者有些建议想说给我听👂，也可以添加一下微信哦！
如果亲感觉我的文章还不错的话，可以一下添加关注哦！
祝各位工作顺利！
