目录
1.字符串可以被视为字符数组,因此可以使用数组的方括号运算符,用来返回某个位置的字符(位置编号从0开始)
2.length属性 返回字符串的长度,该属性也是无法改变的。
1.charAt() 返回指定位置的字符,参数是从0开始编号的位置。
2.charCodeAt() 返回指定索引位置字符的 Unicode 值(十进制表示)
3.concat() 用于连接两个字符串,返回一个新字符串,不改变原字符串
4.slice()用于从原字符串取出 子字符串并返回,不改变原字符串。它的第一个参数是子字符串的开始位置,第二个参数是子字符串的结束位置(不含该位置)。(第二个参数可省略)
5.substring() 用于从原字符串取出子字符串并返回,不改变原字符串,跟slice方法很相像。它的第一个参数表示子字符串的开始位置,第二个位置表示结束位置(返回结果不含该位置)。
6.substr() 用于从原字符串取出子字符串并返回,不改变原字符串,substr方法的第一个参数是子字符串的开始位置(从0开始计算),第二个参数是子字符串的长度
7.indexOf() 用于确定一个字符串在另一个字符串中 第一次出现 的位置,返回结果是匹配开始的位置。如果返回-1,就表示不匹配。
8.lastIndexOf() 是从尾部开始遇到的第一次出现的位置,这个位置的返回结果是 从左边开始算起,而不是从右边开始算起。
9.trim() 用于去除字符串两端的空格,返回一个新字符串,不改变原字符串。该方法去除的不仅是空格,还包括制表符(\t、\v)、换行符(\n)和回车符(\r)
10.toLowerCase() 用于将一个字符串全部转为小写,返回一个新字符串,不改变原字符串。
11.toUpperCase() 将一个字符串全部转为大写,返回一个新字符串,不改变原字符串。
12.match() 用于确定原字符串是否匹配某个子字符串,返回一个数组,成员为匹配的第一个字符串。如果没有找到匹配,则返回null
13.search() 方法的用法基本等同于match,但是返回值为匹配的第一个位置。如果没有找到匹配,则返回-1。
14.replace() 用于替换匹配的子字符串,一般情况下只替换第一个匹配(除非使用带有g修饰符的正则表达式)。
15.split() 按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组
1.includes() 可以用来确定一个字符串是否包含在另一个字符串中,返回布尔值,表示是否找到了参数字符串
2.startsWith() 可以用来确定一个字符串是否包含在另一个字符串中 返回布尔值,表示参数字符串是否在原字符串的头部
3.endsWith() 可以用来确定一个字符串是否包含在另一个字符串中 返回布尔值,表示参数字符串是否在原字符串的尾部
4.repeat() 返回一个新字符串,表示将原字符串重复n次。
5.padStart() 和 padEnd() 如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。
-
- var s = 'hello';
- console.log(s[0]); // "h"
- console.log(s[1]); // "e"
- console.log(s[4]); // "o"
-
- // 直接对字符串使用方括号运算符
- console.log('hello'[1]); // "e"
-
注意点:如果方括号中的数字超过字符串的长度,或者方括号中根本不是数字,则返回undefined
。
-
- console.log('abc'[3]); // undefined
- console.log('abc'[-1]); // undefined
- console.log('abc'['x']); // undefined
-
注意点:字符串与数组的相似性仅此而已。实际上,无法改变字符串之中的单个字符。
-
- var str = 'hello';
- var arr = [0,1,2,3,4];
-
- //删除
- delete str[0];
- console.log(str); // "hello"
- delete arr[0];
- console.log(arr);//[empty, 1, 2, 3, 4]
-
- //替换
- str[1] = 'a';
- console.log(str);// "hello"
- arr[1] = 'a';
- console.log(arr);// [empty, 'a', 2, 3, 4]
-
- //增加
- str[5] = '!';
- console.log(str);//"hello"
- arr[5] = '!';
- console.log(arr);//[empty, 'a', 2, 3, 4, '!']
-
分析:字符串内部的单个字符无法改变和增删,这些操作会失败。
-
- var s = 'hello';
- console.log(s.length); // 5
-
- s.length = 3;
- console.log(s.length);// 5
-
- s.length = 7;
- console.log(s.length);// 5
-
String是官方内置的函数,用来生成字符串对象
-
- var s1 = 'abc';
- var s2 = new String('abc');
-
- console.log(typeof s1); // "string"
- console.log(typeof s2); // "object"
-
- console.log(s2.valueOf()); // "abc"
-
分析:上面代码中,变量s1
是字符串,s2
是对象。由于s2
是字符串对象,s2.valueOf
方法返回的就是它所对应的原始字符串。
注意点:字符串对象是一个类似数组的对象(很像数组,但不是数组)。
-
- console.log(new String('abc'));
- // String {0: "a", 1: "b", 2: "c", length: 3}
-
- console.log((new String('abc'))[1]); // "b"
-
分析:上面代码中,字符串abc
对应的字符串对象,有数值键(0
、1
、2
)和length
属性,所以可以像数组那样取值。
注意点:除了用作构造函数,String
对象还可以当作工具方法使用,将任意类型的值转为字符串。
-
- console.log(String(true)); // "true"
- console.log(String(5) );// "5"
-
0
开始编号的位置。-
- var s = new String('abc');
- console.log(s);//String {0: "a", 1: "b", 2: "c", length: 3}
- s.charAt(1) // "b"
- s.charAt(s.length - 1) // "c"
-
这个方法完全可以用数组下标替代:
-
- 'abc'.charAt(1) // "b"
- 'abc'[1] // "b"
-
注意点:如果参数为负数,或大于等于字符串的长度,charAt
返回空字符串。
-
- console.log('abc'.charAt(-1)); // ""
- console.log('abc'.charAt(3)); // ""
-
-
- console.log('abc'.charCodeAt(1)); // 98
-
分析:上面代码中,abc
的1
号位置的字符是b
,它的 Unicode 码点是98
。
注意点:如果没有任何参数,charCodeAt
返回首字符的 Unicode 码点。
-
- console.log('abc'.charCodeAt());// 97
-
注意点:如果参数为负数,或大于等于字符串的长度,charCodeAt
返回NaN
。(charAt是返回空字符串)
-
- console.log('abc'.charCodeAt(-1)); // NaN
- console.log('abc'.charCodeAt(4));// NaN
-
-
- var s1 = 'abc';
- var s2 = 'def';
-
- var re = s1.concat(s2);
- console.log(re);// "abcdef"
- console.log(s1); // "abc"
-
注意点:该方法可以接受多个参数。
-
- console.log('a'.concat('b', 'cd')); // "abcd"
-
注意点:如果参数不是字符串,concat
方法会将其先转为字符串,然后再连接。
-
- var one = 1;
- var two = true;
- var three = '3';
-
- var re = ''.concat(one, two, three);
- console.log(re); // '1true3'
- console.log(one + two + three); // "23"
-
分析:上面代码中,concat
方法将参数先转成字符串再连接,所以返回的是一个三个字符的字符串。作为对比,加号运算符在两个运算数都是数值时,不会转换类型,所以返回的是一个两个字符的字符串。(1+true=>1+1=2 2+'3'=>'2'+'3' ='23' 并不是一来就看到'3'就把所有的转成字符串)
-
- var re = 'JavaScript'.slice(0, 4);
- console.log(re);// "Java" 返回结果是一个字符串
-
注意点:如果参数是负值,表示从结尾开始倒数计算的位置,即该负值加上字符串长度。意思是参数是负数时,从结尾开始倒数,(从1开始计算,不是从0开始计算)。
-
- console.log('JavaScript'.slice(-6)); // "Script"
- //一个参数是子字符串的开始位置,第二个参数是子字符串的结束位置(不含该位置)。
- console.log('JavaScript'.slice(0, -6)); // "Java"
- console.log('JavaScript'.slice(-2, -1)); // "p"
-
注意点:如果第一个参数大于第二个参数,slice
方法返回一个空字符串。
-
- console.log('JavaScript'.slice(2, 1)); // ""
-
特殊情况:
- //一个参数是子字符串的开始位置,第二个参数是子字符串的结束位置(不含该位置)。
- console.log('JavaScript'.slice(0, -6)); // "Java"
slice
方法很相像。它的第一个参数表示子字符串的开始位置,第二个位置表示结束位置(返回结果不含该位置)。-
- console.log('JavaScript'.substring(0, 4)); // "Java"
-
注意点:如果省略第二个参数,则表示子字符串一直到原字符串的结束。
-
- console.log('JavaScript'.substring(4)) // "Script"
-
注意点:如果第一个参数大于第二个参数,substring
方法会自动更换两个参数的位置。
-
- console.log('JavaScript'.substring(10, 4)); // "Script"
- // 等同于
- console.log('JavaScript'.substring(4, 10)); // "Script"
-
分析:上面代码中,调换substring
方法的两个参数,都得到同样的结果。
注意点:如果参数是负数,substring
方法会自动将负数转为0。
-
- console.log('Javascript'.substring(-3)); // "JavaScript"
- console.log('Javascript'.substring(0)); // "JavaScript"
-
- console.log('JavaScript'.substring(4, -3)); // "Java"
- console.log('JavaScript'.substring(4, 0)); // "Java"
- console.log('JavaScript'.substring(0, 4)); // "Java"
-
分析:上面代码中,第二个例子的参数-3
会自动变成0
,等同于'JavaScript'.substring(4, 0)
。由于第二个参数小于第一个参数,会自动互换位置,所以返回Java
。
总结:由于这些规则违反直觉,因此不建议使用substring
方法,应该优先使用slice
6.
substr() 用于从原字符串取出子字符串并返回,不改变原字符串,substr
方法的第一个参数是子字符串的开始位置(从0开始计算),第二个参数是子字符串的长度-
- console.log('JavaScript'.substr(4, 6)) // "Script"
-
注意点:如果省略第二个参数,则表示子字符串一直到原字符串的结束
-
- console.log('JavaScript'.substr(4)) // "Script"
-
注意点:如果第一个参数是负数,表示倒数计算的字符位置。意思是参数是负数时,从结尾开始倒数,(从1开始计算,不是从0开始计算)。如果第二个参数是负数,将被自动转为0,因此会返回空字符串。
-
- console.log('JavaScript'.substr(-6));// "Script"
- //第二个参数是子字符串的长度
- console.log('JavaScript'.substr(4, -1)); // ""
- console.log('JavaScript'.substr(4, 0)); // ""
-
分析:上面代码中,第二个例子的参数-1
自动转为0
,表示子字符串长度为0
,所以返回空字符串。
-1
,就表示不匹配。-
- console.log('hello world'.indexOf('o')); // 4
- console.log('JavaScript'.indexOf('script')); // -1
-
注意点:indexOf
方法还可以接受第二个参数,表示从该位置开始向后匹配。
-
- //第一个参数为 一个字符串在另一个字符串中第一次出现的位置
- //第二个参数,表示从该位置开始向后匹配,匹配到后(但是算的时候是从0开始算的)
- console.log('hello world'.indexOf('o', 6)); // 7
-
-
- console.log('hello world'.lastIndexOf('o')); // 7
-
注意:lastIndexOf
的第二个参数表示从该位置起向前匹配。
-
- console.log('hello world'.lastIndexOf('o', 6)); // 4
-
分析:匹配的时候,从该位置起向前匹配,返回值是从左到右算。
\t
、\v
)、换行符(\n
)和回车符(\r
)-
- var str = ' hello world ';
- var re = str.trim();
- console.log(re);
- // "hello world"
-
- var str1 = '\r\nabc \t';
- console.log(str1.trim()); // 'abc'
-
-
- var str = 'Hello World';
- var re = str.toLowerCase()
- console.log(re);// "hello world"
-
-
- var str = 'Hello World';
- var re = str.toUpperCase()
- console.log(re);// "HELLO WORLD"
-
null
-
- var str = 'cat, bat, sat, fat';
- var re1 = str.match('at') // ["at"]
- console.log(re1);
- var re2 = str.match('xt') // null
- console.log(re2);
-
分析:返回的数组还有index
属性和input
属性,分别表示匹配字符串开始的位置和原始字符串。
注意点:match
方法还可以使用正则表达式作为参数。
match
,但是返回值为匹配的第一个位置。如果没有找到匹配,则返回-1
。-
- var re = 'cat, bat, sat, fat'.search('at')
- console.log(re);//1
-
注意: search
方法还可以使用正则表达式作为参数。
g
修饰符的正则表达式)。-
- var re = 'aaa'.replace('a', 'b');
- console.log(re);// "baa"
-
注意:replace
方法还可以使用正则表达式作为参数
-
- var re = 'a|b|c'.split('|');
- var re1 = 'a|b|c'.split('a');
- console.log(re);// ["a", "b", "c"]
- console.log(re1);//['', '|b|c']
-
注意点:如果分割规则为空字符串,则返回数组的成员是原字符串的每一个字符。
-
- console.log('a|b|c'.split('')); // ['a', '|', 'b', '|', 'c']
-
注意点:如果省略参数,则返回数组的唯一成员就是原字符串。
-
- var re = 'a|b|c'.split() // ["a|b|c"]
- console.log(re);
-
注意点:如果满足分割规则的两个部分紧邻着(即两个分割符中间没有其他字符),则返回数组之中会有一个空字符串。
-
- console.log('a||c'.split('|')); // ['a', '', 'c']
-
注意点:如果满足分割规则的部分处于字符串的开头或结尾(即它的前面或后面没有其他字符),则返回数组的第一个或最后一个成员是一个空字符串。
-
- console.log('|b|c'.split('|')); // ["", "b", "c"]
- console.log('a|b|'.split('|')); // ["a", "b", ""]
-
注意点:split
方法还可以接受第二个参数,限定返回数组的最大成员数。
-
- console.log('a|b|c'.split('|', 0)); // []
- console.log('a|b|c'.split('|', 1)); // ["a"]
- console.log('a|b|c'.split('|', 2)); // ["a", "b"]
- console.log('a|b|c'.split('|', 3)); // ["a", "b", "c"]
- console.log('a|b|c'.split('|', 4)); // ["a", "b", "c"]
-
分析:split
方法的第二个参数,决定了返回数组的成员数。
注意:split
方法还可以使用正则表达式作为参数
-
- let s = 'Hello world!';
- var re = s.includes('o') // true
- console.log(re);
-
-
- let s = 'Hello world!';
- var re = s.startsWith('Hello');
- var re1 = s.startsWith('llo');
- console.log(re); //true
- console.log(re1);//false
-
-
- let s = 'Hello world!';
- var re = s.endsWith('!') // true
- var re1 = s.endsWith('ld!');//true
- console.log(re);
- console.log(re1);
-
-
- let s = 'Hello world!';
-
- console.log(s.startsWith('world', 6)); // true
- console.log(s.endsWith('Hello', 5)); // true
- console.log(s.includes('Hello', 6)); // false
-
分析:上面代码表示,使用第二个参数n
时,endsWith
的行为与其他两个方法有所不同。它针对前n
个字符(从n之后算),而其他两个方法针对从第n
个位置(从n开始算)直到字符串结束。
n
次。-
- var re = 'x'.repeat(3);
- console.log(re);// "xxx"
- var re1 = 'hello'.repeat(2) // "hellohello"
- console.log(re1);
- var re2 = 'na'.repeat(0) // ""
- console.log(re2);
-
注意:参数如果是小数,会被取整。
-
- console.log('na'.repeat(2.9)) // "nana"
- console.log('na'.repeat(2.1)) // "nana"
-
分析:向下取整。Math.floor()
注意:如果repeat
的参数是负数或者Infinity
,会报错。
-
- console.log('na'.repeat(Infinity));
- // RangeError
- console.log('na'.repeat(-1));
- // RangeError
-
注意:如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于-0
,repeat
视同为 0。
-
- console.log('na'.repeat(-0.9)); // ""
-
注意:参数NaN
等同于 0。
-
- console.log('na'.repeat(NaN)); // ""
- console.log('na'.repeat(0)); // ""
-
注意:如果repeat
的参数是字符串,则会先转换成数字
-
- console.log('na'.repeat('na')); // ""
- console.log('na'.repeat('3')); // "nanana"
-
分析:字符串‘na’转为数字 是 NaN,前面已知,repeat方法会把参数NaN当作0. 字符串'3'转为数字3
padStart()
用于头部补全,padEnd()
用于尾部补全。padStart()
和padEnd()
一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。
-
- console.log('x'.padStart(5, 'ab')); // 'ababx'
- console.log('x'.padStart(4, 'ab')); // 'abax'
- console.log('x'.padEnd(5, 'ab')); // 'xabab'
- console.log('x'.padEnd(4, 'ab')); // 'xaba'
-
注意点:如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
-
- var re = 'xxx'.padStart(2, 'ab') // 'xxx'
- var re1 = 'xxx'.padEnd(2, 'ab') // 'xxx'
- console.log(re);
- console.log(re1);
-
注意点:如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。
-
- console.log('abc'.padStart(10, '0123456789'));
- // '0123456abc'
-
注意点:如果省略第二个参数,默认使用空格补全长度。
-
- console.log('x'.padStart(4)); // ' x'
- console.log('x'.padEnd(4)); // 'x '
-
注意点:padStart()
的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串
- '1'.padStart(10, '0') // "0000000001"
- '12'.padStart(10, '0') // "0000000012"
- '123456'.padStart(10, '0') // "0000123456"
注意点:另一个用途是提示字符串格式。
- '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
- '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
trimStart()
和trimEnd()
这两个方法 它们的行为与trim()
一致,trimStart()
消除字符串头部的空格,trimEnd()
消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。-
- const s = ' abc ';
- console.log(s.trim()); // "abc"
- console.log(s.trimStart()); // "abc "
- console.log(s.trimEnd()); // " abc"
-
分析:上面代码中,trimStart()
只消除头部的空格,保留尾部的空格。trimEnd()
也是类似行为。除了空格键,这两个方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。浏览器还部署了额外的两个方法,trimLeft()
是trimStart()
的别名,trimRight()
是trimEnd()
的别名。