JavaScript中String字符串方法总结

JavaScript中String字符串方法总结

1. JavaScript中String字符串方法总结

2. JavaScript中Array数组方法总结

3. JavaScript中Object对象方法总结

方法	是否修改原始值	是否有返回值	描述
concat()	否	是	连接两个或更多字符串，并返回新的字符串。
toLowerCase()	否	是	把字符串转换为小写。
toUpperCase()	否	是	把字符串转换为大写。
toString()	否	是	返回一个字符串。
charAt()	否	是	返回在指定位置的字符。
charCodeAt()	否	是	返回在指定的位置的字符的 Unicode 编码。
fromCharCode()	否	是	将 Unicode 编码转为字符。
indexOf()	否	是	返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf()	否	是	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
substring()	否	是	提取字符串中两个指定的索引号之间的字符。
slice()	否	是	提取字符串的片断，并在新的字符串中返回被提取的部分。
substr()	否	是	从起始索引号提取字符串中指定数目的字符。
split()	否	是	把字符串分割为字符串数组。
match()	否	是	查找找到一个或多个正则表达式的匹配。返回一个数组或者null。
replace()	否	是	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串，默认只能替换第一次匹配，想替换全部，需要使用正则表达式的g模式。返回新字符串。
replaceAll()	否	是	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串，只能全部替换。返回新字符串。
search()	否	是	查找与正则表达式相匹配的值。返回下标。
includes()	否	是	查找字符串中是否包含指定的子字符串,返回布尔值。
startsWith()	否	是	查看字符串是否以指定的子字符串开头,返回布尔值。
endsWith()	否	是	判断当前字符串是否是以指定的子字符串结尾的（区分大小写）,返回布尔值。
repeat()	否	是	复制字符串指定次数，并将它们连接在一起返回。返回新字符串。
toLocaleLowerCase()	否	是	根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()	否	是	根据本地主机的语言环境把字符串转换为大写。
valueOf()	否	是	返回某个字符串对象的原始值。
padStart()	否	是	如果某个字符串不够指定长度，会在头部补全。返回新字符串。
padEnd()	否	是	如果某个字符串不够指定长度，会在尾部补全。返回新字符串。
trim()	否	是	去除字符串两边的空白。返回新字符串。
trimStart()	否	是	消除字符串头部的空格,除了空格键，方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。返回新字符串。
trimEnd()	否	是	消除尾部的空格,除了空格键，方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。返回新字符串。
at()	否	是	方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

方法解析

代码没有特殊标注情况下，本文环境均是在Chrome环境下测试输出

string.concat() : 连接两个或更多字符串，并返回新的字符串。原始值不变。

写法麻烦，一般直接使用 加号拼接，效果一样

        let str1 = 'asdfgh';
        let str2 = 123456;
        let str3 = 'zxcvbn';
        // zxcvbnasdfgh123456
        console.log( str3.concat( str1, str2 ) );

string.toLowerCase() : 把字符串转换为小写。原始值不变。

        let str1 = 'ASDFGH';
        // asdfgh ------- ASDFGH
        console.log( str1.toLowerCase(), '-------', str1 );

string.toUpperCase() : 把字符串转换为大写。原始值不变。

        let str1 = 'asdfgh';
        // ASDFGH ------- asdfgh
        console.log( str1.toUpperCase(), '-------', str1 );

string.toString() : 返回一个字符串。原始值不变。

null和undefined没有这个方法,会报错

        let str1 = [1,'name'];
        // 输出 字符串，数组
        // 1,name  -------  [1, 'name']
        console.log( str1.toString(), '-------', str1 );


        let str2 = false;
        // 输出 字符串，布尔值
        // false  -------  false
        console.log( str2.toString(), '-------', str2 );


        let str3 = { name:1 };
        // 输出 字符串，布尔值
        // [object Object] ------- {name: 1}
        console.log( str3.toString(), '-------', str3 );

string.charAt() : 返回下标位置的字符串。原始值不变。

1. 默认值是0，可以不传下标
2. 赋值或大于字符串长度，返回空

        let str1 = 'asdfgh';
        // g ------- a -------  -------  ------- asdfgh
        console.log( str1.charAt(4), '-------', str1.charAt(), '-------', str1.charAt(-5), '-------', str1.charAt(10), '-------',str1 );

string.charCodeAt() : 返回在指定的位置的字符的 Unicode 编码。原始值不变。

1. 默认值是0，可以不传下标
2. 赋值或大于字符串长度，返回空

        let str1 = 'asdfgh';
        // 103 '-------' 97 '-------' NaN '-------' NaN '-------' 'asdfgh'
        console.log( str1.charCodeAt(4), '-------', str1.charCodeAt(), '-------', str1.charCodeAt(-5), '-------', str1.charCodeAt(10), '-------',str1 );

string.fromCharCode() : 将 Unicode 编码转为字符。原始值不变。

        // 将Unicode 编码汉字打印出来
        for(var i=0x4e00; i<=0x9fa5; i++){
            console.log(String.fromCharCode(i));
        }

string.indexOf() : 返回某个指定的字符串值在字符串中首次出现的位置。原始值不变。

1. 区分大小写
2. 如果找到了就不再继续找了，如果没找到，返回-1
3. 从左往右

        let str1 = 'asdfgh';
        // 4 '-------' 1 '-------' -1 '-------' 'asdfgh'
        console.log( str1.indexOf('g'), '-------', str1.indexOf('sd'), '-------', str1.indexOf('e'), '-------',str1 );

string.lastIndexOf() : 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。原始值不变。

1. 区分大小写
2. 如果找到了就不再继续找了，如果没找到，返回-1
3. 从右往左

        let str1 = 'asdfgh';
        // 4 '-------' 1 '-------' -1 '-------' 'asdfgh'
        console.log( str1.lastIndexOf('g'), '-------', str1.lastIndexOf('sd'), '-------', str1.lastIndexOf('e'), '-------',str1 );

string.substring( index1, index2 ) : 提取字符串中两个指定的索引号之间的字符，包含开始位置，不包含结束位置。原始值不变。

1. 自动将负数转换成0，将大于str长度的转换成str长度
2. 两个参数不管顺序如何，始终以小数字为开始，大数字为结束
3. 两个参数都不传，就是完整字符串
4. 如果两个参数都是负数或者两个参数都大于str长度，截取的内容都是空
5. 如果一个正数一个负数就是整个字符串
6. 只传一个参数，一直截取到最后,如果是负数，转换成0，如果大于str长度，就截空

        let str1 = 'asdfgh';
        // df
        console.log( str1.substring( 2, 4 ) );
        // asdf
        console.log( str1.substring( -2, 4 ) );
        // as
        console.log( str1.substring( 2, -4 ) );
        // dfgh
        console.log( str1.substring( 2 ) );
        // asdfgh
        console.log( str1.substring(  ) );

string.slice( start, end ) : 提取字符串的片断，并在新的字符串中返回被提取的部分。原始值不变。

1. 自动将传入的负值与字符串的长度相加
2. end参数小于start参数的话，返回空字符串

        let str1 = 'asdfghjkl';
        // df
        console.log( str1.slice( 2, 4 ) );
        // 
        console.log( str1.slice( -2, 4 ) );
        // dfg
        console.log( str1.slice( 2, -4 ) );

string.substr( start, num ) : 从起始索引号提取字符串中指定数目的字符。原始值不变。

1. start开始位置，num参数指定的则是返回的字符个数。如果没有给方法传递num参数，则将字符串的长度作为结束位置
2. 自动将负数的start参数加上字符串的长度，将负数的第num参数转换为0

        let str1 = 'asdfgh';
        // dfgh
        console.log( str1.substr( 2, 4 ) );
        // gh
        console.log( str1.substr( -2, 4 ) );
        // 
        console.log( str1.substr( 2, -4 ) );
        // dfgh
        console.log( str1.substr( 2 ) );
        // asdfgh
        console.log( str1.substr(  ) );

string.split() : 把字符串分割为字符串数组。原始值不变。

1. 没找到字符，就返回完整字符串
2. 旧浏览器不传值会将每一个字母都且分开，现在是翻红完整字符串

        let str1 = 'as_d_fgh';
        // ['as', 'd', 'fgh']
        console.log( str1.split( '_' ) );
        // ['as_d_fgh']
        console.log( str1.split( '.' ) );
        // ['as_d_fgh']
        console.log( str1.split() );

string.includes() : 查找字符串中是否包含指定的子字符串,返回布尔值。原始值不变。

string.startsWith() : 查看字符串是否以指定的子字符串开头,返回布尔值。原始值不变。

string.endsWith() : 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）,返回布尔值。原始值不变。

1. 这三个方法都支持第二个参数，includes、startsWith表示开始搜索的位置直到字符串结束;endsWith参数代表个数(n)，从字符串开始的前n个字符

        let str1 = 'Hello world!';
        // true
        console.log( str1.startsWith( 'Hello' ) );
        // true
        console.log( str1.endsWith( '!' ) );
        // true
        console.log( str1.includes( 'o' ) );

        // false
        console.log( str1.startsWith( 'Hello', 6 ) );
        // false
        console.log( str1.endsWith( '!', 5 ) );
        // true
        console.log( str1.includes( 'o', 6 ) );

        // false
        console.log( str1.startsWith( 'Hello', 55 ) );
        // true
        console.log( str1.endsWith( '!', 55 ) );
        // false
        console.log( str1.includes( 'o', 55 ) );

        // true
        console.log( str1.startsWith( 'Hello', -6 ) );
        // false
        console.log( str1.endsWith( '!', -5 ) );
        // true
        console.log( str1.includes( 'o', -6 ) );

string.match() : 查找找到一个或多个正则表达式的匹配。返回一个数组。原始值不变。

1. 如果没有符合条件，返回null
2. regexp没有标志g,match方法就只能在str中执行一次匹配，没有找到匹配文本就返回null，如果匹配到了，就返回一个数组存放了与匹配到文本有关的信息，数组的第0项是与regexp匹配的文本，第1项是匹配到文本的起始字符位置，第2项是str字符串。
3. regexp如果有g，mantch 方法执行全局检索，没有就返回null,有就返回匹配到的所有字符串，是一个数组

        let str1 = '2017-07-03';
        let regDate = /^(\d{1,4})-(\d{1,2})-(\d{1,2})$/;
        // ['2017-07-03', '2017', '07', '03', index: 0, input: '2017-07-03', groups: undefined]
        // 先返回完整正则匹配信息，再依次返回分组信息，然后返回文本的起始字符的位置，然后是str的完整字符串
        console.log(str1.match(regDate));
        
        let regDate2 = /^(\d{1,4})-(\d{1,2})-(\d{1,2})$/g;
        // ['2017-07-03']
        console.log(str1.match(regDate2));

string.replace() : 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串，默认只能替换第一次匹配，想替换全部，需要使用正则表达式的g模式。返回新字符串。原始值不变。

        // str.replace(旧符号，新符号); 把str中的%替换成#
        let str1 = '20%,50% OFF de Desconto 20%,50%Lancheiras';

        // 只替换一次
        // 20#,50% OFF de Desconto 20%,50%Lancheiras
        console.log(str1.replace( '%', '#'));

        // 正则可以批量替换
        // 20#,50# OFF de Desconto 20#,50#Lancheiras
        console.log(str1.replace( /\%/g, '#'));

        let newStr=str1.replace( /\d{2}\%/g, function( item, index ){
            let tmp = '';
            tmp='<i>' + item + '</i>';
            return tmp;
        });

        // 正则与函数配合，进行复杂替换
        // <i>20%</i>,<i>50%</i> OFF de Desconto <i>20%</i>,<i>50%</i>Lancheiras
        console.log(newStr);

string.replaceAll(searchValue, replacement) :在字符串中查找匹配的子串，并替换与正则表达式匹配的子串，只能全部替换。返回新字符串。原始值不变。

1. searchValue是搜索模式，可以是一个字符串，也可以是一个全局的正则表达式（带有g修饰符），正则表达式不带g，程序会报错。
2. replacement是一个字符串，表示替换的文本，其中可以使用一些特殊字符串。
   • $&：匹配的字符串。
   • $&：匹配的字符串。
   • $ ` ：匹配结果前面的文本。
   • $'：匹配结果后面的文本。
   • $n：匹配成功的第n组内容，n是从1开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式。
   • $$：指代美元符号$。
3. replacement除了为字符串，也可以是一个函数，该函数的返回值将替换掉第一个参数searchValue匹配的文本。
   • 第一个参数是捕捉到的匹配内容
   • 第二个参数捕捉到是组匹配（有多少个组匹配，就有多少个对应的参数）。
   • 倒数第二个参数是捕捉到的内容在整个字符串中的位置
   • 最后一个参数是原字符串。

        // str.replace(旧符号，新符号); 把str中的%替换成#
        let str1 = '20%,50% OFF de Desconto 20%,50%Lancheiras';

        // 全部替换
        // 20#,50# OFF de Desconto 20#,50#Lancheiras
        console.log(str1.replaceAll( '%', '#'));

// $& 表示匹配的字符串，即`b`本身
// 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')
// 'abbc'

// $` 表示匹配结果之前的字符串
// 对于第一个`b`，$` 指代`a`
// 对于第二个`b`，$` 指代`ab`
'abbc'.replaceAll('b', '$`')
// 'aaabc'

// $' 表示匹配结果之后的字符串
// 对于第一个`b`，$' 指代`bc`
// 对于第二个`b`，$' 指代`c`
'abbc'.replaceAll('b', `$'`)
// 'abccc'

// $1 表示正则表达式的第一个组匹配，指代`ab`
// $2 表示正则表达式的第二个组匹配，指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
// 'bcab'

// $$ 指代 $
'abc'.replaceAll('b', '$$')
// 'a$c'

'aabbcc'.replaceAll('b', () => '_')
// 'aa__cc'

const str = '123abc456';
const regex = /(\d+)([a-z]+)(\d+)/g;

function replacer(match, p1, p2, p3, offset, string) {
  return [p1, p2, p3].join(' - ');
}

str.replaceAll(regex, replacer)
// 123 - abc - 456


// 上面例子中，正则表达式有三个组匹配，所以replacer()函数的第一个参数match是捕捉到的匹配内容（即字符串123abc456），后面三个参数p1、p2、p3则依次为三个组匹配。

string.search() : 查找与正则表达式相匹配的值首次出现的位置。原始值不变。跟indexOf功能一模一样,但是search方法的参数是正则表达式

        let str1 = 'ancHLeiras';
        let reg = /a/i;
        let reg2 = /h/i;
        // 0
        console.log(str1.indexOf( 'a' ));
        // 0
        console.log(str1.search( reg ));

        // -1
        console.log(str1.indexOf( 'h' ));
        // 3
        console.log(str1.search( reg2 ));

string.repeat() : 复制字符串指定次数，并将它们连接在一起返回。返回新字符串。原始值不变。

1. 参数如果是小数，会被取整。
2. 参数是负数或者Infinity，会报错。
3. 参数是字符串，则会先转换成数字。

        let str1 = 'hello';
        
        // hellohello ----- hello
        console.log(str1.repeat( 2 ), '-----', str1 );

string.padStart() : 如果某个字符串不够指定长度，会在头部补全。返回新字符串。原始值不变。

string.padEnd() : 如果某个字符串不够指定长度，会在尾部补全。原始值不变。

        let a = 'x';
        let a1 = a.padStart(5, 'ab');
        console.log(a, a1); // 'x' 'ababx'

        let b = 'x';
        let b1 = b.padStart(4, 'ab');
        console.log(b, b1); // 'x' 'abax'

        let c = 'x';
        let c1 = c.padEnd(5, 'ab');
        console.log(c, c1); // 'x' 'xabab'

        let d = 'x';
        let d1 = d.padEnd(4, 'ab');
        console.log(d, d1); // 'x' 'xaba'

string.trim() : 去除字符串两边的空白。返回新字符串。原始值不变。

1. 空白符包括：空格、制表符 tab、换行符等其他空白符等。
2. 不适用于 null, undefined, Number 类型。

        let str1 = '      hel   lo     ';
        
        // |hel   lo|
        console.log( '|' + str1.trim() + '|' );

string.trimStart() : 消除字符串头部的空格,返回新字符串。

1. 空白符包括：空格、制表符 tab、换行符等其他空白符等。
2. 不适用于 null, undefined, Number 类型。

string.trimEnd() : 消除尾部的空格,返回新字符串。

1. 空白符包括：空格、制表符 tab、换行符等其他空白符等。
2. 不适用于 null, undefined, Number 类型。

        let a = '  abc  ';
        let a1 = a.trim();
        console.log(`|${a}| |${a1}|`); //|  abc  | |abc|

        let b = '  abc  ';
        let b1 = b.trimStart();
        console.log(`|${b}| |${b1}|`); //|  abc  | |abc  |
        
        let c = '  abc  ';
        let c1 = c.trimEnd();
        console.log(`|${c}| |${c1}|`); //|  abc  | |  abc|

string.at() : 方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

1. 参数位置超出了字符串范围，at()返回undefined。

        let str = 'hello';
        console.log(str.at(1)); // "e"
        console.log(str.at(-1)); // "o"
        console.log(str.at(10)); // undefined
        console.log(str.at(-10)); // undefined