1. 获取字符串长度

javascript中字符串的属性length，用于获取字符串的长度；数组和函数同样有这个属性。

const str = 'gmx-white';
str.length; // 9

2. 获取字符串指定位置的值

1)下标；2)at；3)chatAt；4)chatCodeAt

下标

str[index]：字符串有length属性，因此可以通过下标获取对应位置的值，但是index不能超过length，不能为负数。

const str = 'gmx-white'
str[1];  // m
str[99];  // undefined
str[-1];  // undefined

at

str.at(index)：获取index位置的字符，允许为负数（倒数），但不能超过length。

const str = 'gmx-white'
str.at(2);  // x
str.at(10); // undefined
str.at(-2);  // t
str.at(-10);   // undefined

chatAt

str.charAt(index)：index为0~length-1的整数，不能为负数，index超出则返回空字符。

const str = 'gmx-white'
str.charAt(3);  // -
str.charAt(-1);  // 
str.charAt(10);  //

charCodeAt

str.charCodeAt(index)：返回 0 到 65535 之间的整数，表示index处的字符的 UTF-16 代码单元

const str = 'gmx-white'
str.charCodeAt(4);  // 119
// index：0~length-1之间
str.charCodeAt(-1);  // NaN
str.charCodeAt(10);  // NaN

3. 字符串搜索

搜索指定字符串在str中的位置

1)startWith；2)endWith；3)indexOf；4)lastIndexOf；5)includes

startWith

str.startWith(searchString[, position])：判断searchString是否在str的开头。

const str = 'gmx-white'
str.startsWith('gmx');     // true
str.starstWith('-', 3);  // true
str.starstWith('mx');    // false

endsWith

str.endsWith(searchString[, length])：判断searchString是否在str的末尾。
参数length默认为str.length，从str的前length的字符串中查找。

const str = 'gmx-white'
str.length;  // 9
str.endsWith('white');     // true
str.endsWith('whit', 8);  // true
str.endsWith('whit');    // false

indexOf

str.indexOf(searchValue [, fromIndex])：返回第一次出现的searchValue的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。

const str = 'gmx-white'
str.indexOf('gmx');      // 0
str.indexOf('gmx', 10);  // 1
str.indexOf('gmx--');    // 1

lastIndexOf

str.lastIndexOf(searchValue[, fromIndex])：返回searchValue最后一次出现的索引，在一个字符串中的指定位置 fromIndex处从后向前搜索。如果没找到这个特定值则返回-1 。

const str = 'gmx-gmx-white'
str.lastIndexOf('gmx');  // 4
str.lastIndexOf('gmx', 3);  // 0
str.lastIndexOf('gx');  // -1

includes

str.includes(searchString[, position])：从position位置(默认为0)开始查找searchString

const str = 'gmx-white'
str.includes('gmx');  // true
str.includes('gmx', 4);  // false
str.includes('gmx', 10); // false

4. 字符串模式匹配

根据字符串或者正则表达式匹配源字符串
1)match；2)matchAll；3)search；4)replace；5)replaceAll

match

str.match()：检索返回一个字符串匹配正则表达式的结果。该数组的内容依赖于 regexp 是否具有全局标志 g

const str = 'gmx-white'
const regexWithg = /[a-z]/g
const regex = /[a-z]/g
str.match(regexWithg);  // ['g', 'm', 'x', 'w', 'h', 'i', 't', 'e']
str.match(regex);   // ['g', index: 0, input: 'gmx-white', groups: undefined]

matchAll

str.matchAll(regex)：返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。regexp 必须具有全局标志 g，否则报TypeError

const str = 'gmx-white'
const regex = /(gmx)-(white)/g
const res = [...str.matchAll(regex)]  // ['gmx-white', 'gmx', 'white']

search

str.search(regexp)：执行正则表达式和对象之间的搜索匹配。不支持正则表达式g标志

const str = "gmx-gmx-white";
const regex = /gmx/g  // 只查找第一个匹配
str.search(regex, 'GMX');  // 0

replace

str.replace(regexp|substr, newSubStr|function)：返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。

const str = "gmx-gmx-white";
const regex = /gmx/g
str.replace('gmx', 'GMX');  // GMX-gmx-white
str.replace(regex, 'GMX');  // GMX-GMX-white

replaceAll

str.replaceAll(regexp|substr, newSubstr|function)：返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。regex必须加g，否则报TypeError

const str = "gmx-gmx-white";
const regex = /gmx/g
str.replaceAll('gmx', 'GMX');  // GMX-GMX-white
str.replaceAllregex, 'GMX');  // GMX-GMX-white

更多正则模式匹配方法，可见juejin.cn/post/709560…

5. 字符串拼接/扩展

1)concat；2)padEnd；3)padStart；4)repeat

concat

str.concat(str1, [, ...strN])：返回拼接后的字符串，不改变原字符串

const str = 'gmx-white'
const str1 = str.concat(...[' is', ' very']);  // "gmx-white is very"
const str2 = str1.concat(' good');  // "gmx-white is very good"

padEnd

str.padEnd(targetLength [, padString])：用一个字符串填充当前字符串，返回填充后达到指定长度的新的字符串。从当前字符串的末尾（右侧）开始填充。padString默认为空格。
注意：若padString.length+str.length>targetLength，则截断padString

const str = "gmx-white";
str.padEnd(15, 'a');  // gmx-whiteaaaaaa
str.padEnd(15, str);  // gmx-whitegmx-wh

padStart

str.padStart(targetLength [, padString])：作用与padEnd()类似，从左侧开始填充。

const str = "gmx-white";
str.padStart(15, 'a');  // aaaaaagmx-white
str.padStart(15, str);  // gmx-whgmx-white

repeat

str.repeat(count)：构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。
count为正数，浮点隐式转换，负数报RangeError

const str = "gmx-white";
str.repeat(2);  // gmx-whitegmx-white

6. 字符串截取

取出字符串的一部分 1)slice；2)substring；3)substr

slice

str.slice(beginIndex[, endIndex])：提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

const str = "gmx-gmx-white";
str.slice(2);   // x-gmx-white
str.slice(2,6);  // x-gm

substring

str.substring(indexStart[, indexEnd])：返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。作用与slice相同

const str = "gmx-gmx-white";
str.substring(2);  // x-gmx-white  
str.substring(2,6);  // x-gm

substr

str.substr(start[, length])：返回从start索引开始的length字符串，浏览器支持但是Web标准已废弃，不展开介绍。

7. 字符串大小写转换

1)toLowerCase；2)toUpperCase

toLowerCase

str.toLowerCase()：调用该方法的字符串值转为小写形式，并返回新字符串。

const str = "gmx-GMX-white";
str.toLowerCase();  // gmx-gmx-white
str;  // gmx-GMX-white

toUpperCase

str.toUpperCase()：将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）。

const str = "gmx-GMX-white";
str.toUpperCase();  // GMX-GMX-WHITE
str;  // gmx-GMX-white

8. 删除首尾空白符

1)trim；2)trimStart；3)trimEnd

trim

str.trim()：去除首尾空白符，返回新字符串

const str = '  gmx-white   '
str.trim();  // gmx-white

trimStart

str.trimStart();str.trimLeft();两个函数是同一个用法，去除开头的空白符。

const str = "  gmx-white   ";
str.trimLeft();  // 'gmx-white   '
str.trimStart();

trimEnd

str.trimEnd();str.trimRight();去除字符串末端的空白字符

const str = "  gmx-white   ";
str.trimRight();  // '  gmx-white'
str.trimEnd();

9. 获取字符串原始值

valueOf

str.valueOf()：返回 String 对象的原始值

const str = new String('gmx-white');
str;  // String {'gmx-white'}
str.valueOf(str);  // gmx-white

toString

str.toString()：返回指定对象的字符串形式。

const str = new String('gmx-white');
str;  // String {'gmx-white'}
str.toString(str);  // gmx-white

javascript常用字符串方法总结