前端基础(一):字符串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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容