JS字符串的操作

在JS中,字符串是六种数据类型之一,其重要程度不言而喻。JS中有一系列的内置方法可以对字符串进行操作,下面就一起来看看吧。

一、字符串简介

  • 字符串的定义
    字符串是零个或多个字符按照序列进行排列而组成,通常放在单引号或双引号中;

二、多行字符串与字符串的转义

  • 多行字符串
    • 为何需要多行字符串
      主要原因是方便在敲代码的时候避免写过长的字符串导致代码可读性降低;
    • 创建多行字符串的方法

1.使用+号对多个字符串进行连接,如下例子:

    var a = '我叫小明'
    + '我有一个心仪的女神'
    + '每次我找她聊天'
    + '很不巧她都说要洗澡';

2.直接换行,然后用反斜杠\将换行转义:

    var a = '我叫小明\
    我有一个心仪的女神\
    每次我找她聊天\
    很不巧她都说要洗澡';

3.使用注释的方法,不过这个方法并不常用:

(function () { /*
我叫小明
我有一个心仪的女神
每次我找她聊天
很不巧她都说要去洗澡
*/}).toString().split('\n').slice(1,-1).join('\n')
  • 关于字符串的转义
    在JS中,敲字符串时可以使用单引号或者双引号进行包裹,但是有一点要注意的,如果字符串本身有单引号,那么外层包裹的就要是双引号,比如下图:

    此外,还可以使用字符串转义符号\对其中的引号进行转义,使其失去引号功能,成为一个普通的字符;
    • 转义符号\
      例如上面的例子,使用转义符号的话就无需注意外层的引号了:


      PS:转义符号\放置在需要转义的字符前面;

    • 此外,还有一些其它的特殊字符也需要进行转义

代码 输出
' 单引号'
" 双引号"
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\ 单个反斜杠 \
\t 制表符
\f 换页符
& 与符号

三、常用的字符串操作方法

  • 字符串长度和索引
    • 字符串长度(length)
      字符串可以使用length来获取其自身的字符长度:
      不过需要注意上面的转义字符,例如\n只是一个字符。

      字符串长度获取

    • 字符串索引(下标、charAt()、charCodeAt())
      1.字符串的下标 :
      字符串是字符的有序排列,那么就可以通过字符串的下标对其中的字符进行检索,例子如下:

      下标检索字符串

      此外也可以通过length直接定位到倒数的字符

      2.charAt()charCodeAt()方法
      charAt()方法的功能和使用下标对字符串中的字符进行检索一样,参数填入的就是下标,如果该字符串为空,那么无论参数为几输出的也是'(空字符串)'
      charAt()

      charCodeAt()方法的功能是通过下标检索字符串中的某个字符,然后返回它的ASCII码,这里要注意的是。空格也有对应的ASCII码,而空字符串没有:
      charCodeAt()方法

四、字符串的截取

有时候,一段字符串很长,而我们需要它其中的一部分,这时候就需要用到字符串截取的方法了。
用来截取字符串的方法有substr、substring、slice三种。

  • substr方法
    substr()方法截取字符串,小括号内的参数有两个,第一个是截取开始位置,第二个是截取的长度:
    如下:从第三位起截取五个字符:
    substr
  • substring方法
    substr()方法相比,substring()中的参数填入的也是两个,但是其意义却有所不同,substring()中的两个参数第一个也是起始位置,但是第二个是结束为止,并且该位并不包含在内;
    substr()相同的例子,结果却有所不同:
    substring
  • slice方法
    slice方法与substring方法类似,得到的结果也类似,但是有一点不同的是slice接受负参,而substring如果有负参则直接将负参转化为0:
    slice的负参中,-1表示最后一位,-2倒数第二位,以此类推:
    对比如下:
    slice与substring的对比

五、字符串的查找和替换

字符串的查找替换有三种方法search、replace、match、indexOf / lastIndexOf,当我们需要在一长串字符串中寻找到或是替换想要的字符就需要用到它们:

  • search方法
    search()顾名思义,就是查找,它接受一个参数,该参数是你需要查找的字符,如果被查找的字符串中这个字符,则返回它在该字符串中的下标,如果没有则返回-1,用法如下:


    search

    但是需要注意的是:如果字符串中有多个符合的字符,search方法只会返回第一个查找到的字符的位置
    如果想要返回每个匹配到的字符,那么可以使用match方法搭配正则表达式

  • match方法
    match()方法一般搭配正则表达式使用,支持全局匹配,参数是匹配的字符或正则,返回一个数组,如上例子中,我想要匹配字符串中g这个字符,可以写一个正则/g/g来进行匹配:

    match

  • indexOf / lastIndexOf方法
    indexOf() 和 lastIndexOf()方法分别是查找第一个要查找的字符(indexOf())和最后一个要查找的字符(lastIndexOf()),参数填入的都是要查找的字符,然后返回这个字符在字符串中的位置:


    indexOf() 和 lastIndexOf()
  • replace方法
    replace()方法用于查找并替换字符,该方法不会影响原字符串,可以填入两个参数,第一个参数为需要被替换的字符,第二个是用来替换的字符,返回替换字符后的新字符串:


    replace

    此外,replace的参数也可以是正则表达式:


六、字符串的大小写

操作字符串的大小写有两个方法toUpperCase、toLowerCase
这两个方法都是默认全局匹配的,用法如下:

字符串的大小写

七、字符串转换数组(split方法)

有时候需要对字符串进行更加复杂的操作,可以将其转换成数组,然后采用数组的操作方法来操作,这时候就需要用到字符串的split方法:
split()方法有一个参数,这个参数是用来做字符串分割的参照物,再按照这个参照物分割字符串后按照顺序填充进数组中,如果不填,则默认整个字符串就是数组中的一项:


split方法

方法总结

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

推荐阅读更多精彩内容

  • Ba la la la ~ 读者朋友,你们好啊,又到了冷锋时间,话不多说,发车! 1、字符串转换 var...
    王饱饱阅读 362评论 0 3
  • js基础篇(一)——数组的各种操作js基础篇(三)——DOM的各种操作 1. 创建字符串 一个字符串用于存储一系列...
    hanyuntao阅读 885评论 0 5
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,219评论 0 4
  • 2017.7.3晴 不经意就接近训练尾声了,有好多小伙伴坚持下来,有的不会知道是什么原因也有没有坚持的,每个人...
    fab黄菲菲阅读 276评论 0 0
  • 挺庆幸我自己还能周期性的记起来,在这里写下点什么 最近找房子、搬家、退房、再找房子、再搬家 稍微回想一下,跟一年前...
    采臣胸阅读 249评论 0 1