前端基础(一):字符串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




posted @ 2020-05-27 09:01  hongwj  阅读(1516)  评论(0编辑  收藏  举报