前端基础(一):字符串String常用操作
一、String 的属性
1.1 length 属性
获取字符串的长度,需要特别注意的是:JavaScript 中的中文每个汉字也只代表一个字符,可能跟其他语言不同。
'中国'.length // 2
1.2 prototype 属性
在 OOP 中经常用到,用来给对象添加属性或方法,且添加的属性或方法在所有实例上共享。因此常用来扩展 JavaScript 对象,如下面的代码给 String 添加了一个去除两边空格的方法。
String.prototype.trim = function(){
return this.replace(/^\s*|\s*$/g,'');
}
二、String 的方法
2.1 charAt(index)
获取指定位置的字符串,从 0 到 str.length - 1
var str = 'abcdef';
charAt(2); // 'c'
charAt(2); // ''
2.2 charCodeAt(index)
返回指定位置字符的 unicode 编码
var str = "abcde";
console.log(str.charCodeAt(0)); // 97
2.3 查找类方法
2.31 indexOf(searchValue, fromIndex)
用来检索指定的字符串首次出现的位置,fromIndex 可以省略,省略的话从 0 开始检索。
var str = 'abcdeabcde';
str.indexOf('a'); // 0
str.indexOf('a', 3); // 5
str.indexOf('bc'); // 1
2.32 includes(), startsWith(), endsWith()
传统上,我们通常使用 indexOf
方法来确定,一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
- includes(): 返回布尔值,表示是否找到了参数字符串。
- startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith(): 返回布尔值,表示参数字符串是否在原字符串的尾部。
let str = 'Hello world!';
str.startsWith('Hello'); // true
str.endsWith('!'); // true
str.includes('o'); // true
这三个方法都支持第二个参数,表示开始搜索的位置。
let str = 'Hello world!';
str.startsWith('world', 6); // true
str.endsWith('Hello', 5); // true
str.includes('Hello', 1); // false
可见,使用第二个参数 n 时,endsWith 的行为与其他两个方法不同。它针对前 n 个字符,而其他两个方法针对从第 n 个位置直到字符串结束。
2.33 lastIndexOf(searchValue, fromIndex)
用来检索指定的字符串最后出现的位置,检索顺序从后向前。
var str = 'abcdeabcde';
console.log(str.lastIndexOf('a')); // 5
console.log(str.lastIndexOf('a', 3)); // 0 从第索引3的位置往前检索
console.log(str.lastIndexOf('bc')); // 6
2.34 search()
str.search(subStr), str.search(regExp) 用于检索字符串中指定的子字符串,或与正则表达式相匹配的子字符串。它返回第一个子字符串的起始位置,如未匹配到,则返回 -1。
var str = 'abcDEDF';
console.log(str.search('c')); // 2
console.log(str.search('d')); // -1
console.log(str.search(/d/i)); // 3
2.35 match()
str.match(subStr), str.match(regExp) 在字符串内检索指定的值,或找到一个(或多个)正则表达式的匹配。
如果参数中传入的是子字符串或没有全局匹配的正则表达式,则match方法从开始位置进行一次匹配,若未匹配到则返回null,否则返回一个数组。
var str = '1a2b3c4d5be';
console.log(str.match('h')); // null
console.log(str.match('b')); // ["b", index: 3, input: "1a2b3c4d5e"]
console.log(str.match(/b/)); // ["b", index: 3, input: "1a2b3c4d5e"]
如果参数中传入的是具有全局匹配的正则表达式,那么match从开始位置进行多次匹配,直到最后。如没有匹配到结果,则返回null。否则返回一个数组,数组中存放所有复合要求的子字符串,且没有index和input属性。
var str = '1a2b3c4db5e';
console.log(str.match(/h/g)); // null
console.log(str.match(/\d/g)); // ["1", "2", "3", "4", "5"]
console.log(str.match(/b/g)); // ["b", "b"]
2.4 截取类方法
2.41 substring(start, end)
这是最常用到的字符串截取方法,可接受两个参数(参数不能为负),分别是要截取的起始和结束位置。它将返回一个新的字符串,其内容是从start到end-1处的所有字符。若结束参数end省略,则表示从起始位置一直截取到最后。
var str = 'abcdefg';
console.log(str.substring(1, 4)); // bcd
console.log(str.substring(1)); // bcdefg
console.log(str.substring(-1)); // abcdefg,传入负值时会视为0
2.42 substr(start, length)
在字符串中抽取从start下标开始的指定长度的字符,其返回值是一个字符串,包含从start处开始的length个字符。若没有指定length,则为从start处开始到结尾的字符。若start为负数,则表示从字符串尾部开始算起。
var str = 'abcdefg';
console.log(str.substr(1, 3)); // bcd
console.log(str.substr(2)); // cdefg
console.log(str.substr(-2, 4)); // fg,目标长度较大的话,以实际截取的长度为准
2.43 slice(start, end)
slice() 方法与 substring() 类似,它传入的两个参数也分别对应着开始和结束位置。区别在于,slice 中的参数可以为负,若参数为负,则该参数规定的是从字符串尾部开始计算起的位置。也就是说,-1 指字符串的最后一个字符。
var str = 'abcdefg';
console.log(str.slice(1, 4)); // bcd
console.log(str.slice(-3, -1)); // ef
console.log(str.slice(1, -1)); // bcdef
console.log(str.slice(-1, -3)); // "" 若传入的参数有问题,则返回空
2.5 其他方法
2.51 replace()
替换匹配的值,接受两个参数,第一个是搜索模式,第二个是替换的内容。
// replace的一个应用,就是用来消除字符串首尾两端的空格
var str = " hello world ";
str.replace(/^\s+|\s+$/g, '');
replace() 方法的第二个参数还可以是个函数,将每一个匹配内容替换为函数返回值。
'3 and 5'.replace(/\d/g,function(match){
return 2 * match;
}); // "6 and 10"
2.52 split(separator, howmany)
该方法用于把字符串分割成字符串数组,第一个参数表示分割位置(参考符),第二个参数表示返回数组的允许最大长度。
var str = 'a|b|c|d|e';
console.log(str.split('|')); // ["a", "b", "c", "d", "e"]
console.log(str.split('|', 3)); // ["a", "b", "c"]
console.log(str.split('')); // ["a", "|", "b", "|", "c", "|", "d", "|", "e"]
也可以用正则来切割
var str = 'a1b2c3d4e';
console.log(str.split(/\d/)); // ["a", "b", "c", "d", "e"]
2.53 toLowerCase() 和 toUpperCase()
字母大小写转化
var str = 'JavaScript';
console.log(str.toLowerCase()); // javascript
console.log(str.toUpperCase()); // JAVASCRIPT