js字符串操作方法

提示:ECMAScript 中的字符串是不可变的,字符串不能更改,只能替换。所以以下操作方法均不能改变原字符串,下面的讲解中将不对源字符串做打印观察,只打印观察新字符串的值。

1. length

获取字符串的长度

var browserType = 'mozilla';
browserType.length;//7

2. str[idx]、charAt()、charCodeAt()

str[idx] 属性访问
charAt()方法返回字符串中指定下标(位置)的字符串
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

browserType[0];  //m
browserType.charAt(0);  //m
browserType[-2];  //undefined
browserType.charAt(-2);  //""

注意:小标是从0开始,不是1!

使用属性访问有点不太靠谱:

  • 不适用 Internet Explorer 7 或更早的版本
  • 它让字符串看起来像是数组(其实并不是)
  • 如果找不到字符,[ ] 返回 undefined,而 charAt() 返回空字符串。
  • 它是只读的。str[0] = "A" 不会产生错误(但也不会工作!)

例如:

var str = "HELLO WORLD";
str[0] = "A";             // 不产生错误,但不会工作
str[0];                   // 返回 H

3. indexOf() 、 lastIndexOf()

indexOf()返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。

'mozilla'.indexOf('zill');  //2

lastIndexOf()返回指定文本在字符串中最后一次出现的索引,如果没有匹配项,返回 -1

var str = "abcdarf";
var pos = str.lastIndexOf("a");  //4

两种方法都接受作为检索起始位置的第二个参数。

var str = "abcdarf";
var pos = str.indexOf("a");  //0
var pos = str.indexOf("a",1);  //4

lastIndexOf()方法向后进行检索(从尾到头),这意味着:假如第二个参数是4,则从位置4开始往左检索,直到字符串的起点。(个人的理解:lastIndexOf() 检索的本质是从右往左检索,返回该字符串第一次出现的位置,这里提到的下标位置均为从左往右的下标位置)

var str = "bcda23a";
str.lastIndexOf("a");  //6
str.lastIndexOf("a",1);  //-1
str.lastIndexOf("a",4);  //3

4. search()

search()方法搜索特定值的字符串,并返回匹配的位置:

var str = "bcda23daef";
str.search('a');  //3
str.earch(/da/ig);  //2

与indexOf的区别:
search()方法无法设置第二个开始位置参数。
indexOf()方法无法设置更强大的搜索值(正则表达式)。

5. slice()

提取字符串的某个部分,并在新字符串中返回被提取的部分。
slice(a,b) //获取范围[a,b)
该方法设置两个参数:起始索引(开始位置 ),终止索引(结束位置)。可接受负的索引

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);  //res "Banana"

如果某个参数为负,则从字符串的结尾开始计数。

var str = "Apple, Banana, Mango";
str.slice(-14,-7);  //打印结果: " Banana"
str.slice(5,-7);  // 打印结果:", Banana"
//str不会改变

如果省略第二个参数,则该方法将裁剪字符串的剩余部分:

var str = "Apple, Banana, Mango";
str.slice(-5);  //"Mango"
str.slice(7);  //"Banana, Mango"

提示:负值位置不适用 Internet Explorer 8 及其更早版本。

6. substring()

substring(start,end); //截取字符串 范围是[start, end)
该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。无法接受负的索引。

var str = "Apple, Banana, Mango";
str.substring(7,13);  //"Banana"

如果省略第二个参数,则该 substring() 将裁剪字符串的剩余部分。

var  str =  'Hello world!';
str.substring(3);   //"lo world!"

7. substr()

substr(a,b) //截取字符串,范围是从下标为a的字符开始,截取长度为b
该方法设置两个参数:起始索引(开始位置 可为负数),截取的长度。

var str = "Hello world!";
str.subst(3,4);  //"lo w"

如果省略第二个参数,则该 substr() 将裁剪字符串的剩余部分。

var str = "Hello world!";
str.subst(3);  //"lo world!"

8. replace()

用另一个值替换在字符串中指定的值,不会改变调用它的字符串。它返回的是新字符串。默认地,replace()只替换首个匹配,并对大小写敏感:

var str = "Hello world! hello";
var res = str.replace('llo','*');  // "He* world! hello"
var str = "HeLlo world! hello";
var res = str.replace('llo','*');  // "HeLlo world! he*"

如需执行大小写不敏感的替换,请使用正则表达式 /i(大小写不敏感),如需替换所有匹配,请使用正则表达式的 g 标志(用于全局搜索):

var str = "HeLlo world! hello";
str.replace(/llo/ig,'*');  //"He* world! he*"

9. toUpperCase()、toLowerCase()

toUpperCase() 把字符串转换为大写;toLowerCase() 把字符串转换为小写。

var str= "Hello World!"; 
str.toUpperCase();   //"HELLO WORLD!"
str.toLowerCase();  //"hello world!"

10. concat()

concat()连接两个或多个字符串。

var str1 = "Hello";
var str2= "World";
var str3= str1.concat(str2);  //  "HelloWorld"
var str4 = str1.concat(" ",str2,"!");  //"Hello World!"

11. trim()

trim() 方法删除字符串两端的空白符。

var str = "       Hello World!        ";
str.trim();  //  "Hello World!"

警告:Internet Explorer 8 或更低版本不支持 trim() 方法。

12. split()

可以通过 split() 将字符串转换为数组。可接受正则匹配。

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

推荐阅读更多精彩内容

  • 在JS中,字符串是六种数据类型之一,其重要程度不言而喻。JS中有一系列的内置方法可以对字符串进行操作,下面就一起来...
    大春春阅读 10,956评论 0 16
  • js基础篇(一)——数组的各种操作js基础篇(三)——DOM的各种操作 1. 创建字符串 一个字符串用于存储一系列...
    hanyuntao阅读 885评论 0 5
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,044评论 0 1
  • install package npm install express view installed packag...
    鸭梨山大哎阅读 311评论 0 1
  • 本质上,我是一个不思进取的人。 我喜欢安安静静地备课上课,写些他人看来毫无用处的教学后记,不受打扰,自得其乐。 如...
    陈牧羊阅读 238评论 0 0