JavaScript中关于字符串操作总结

因为关于JavaScript中的字符串(String类型)的操作经常是忘记或者是混淆了,所以今天借着这个机会进行总结一番。

String类型都有valueOf(),toLocaleString(),toString()方法,都返回对象所表示的基本字符串。String类型都有一个length属性,表示字符串的长度

1. 字符方法
  • charAt()charCodeAt()
    这两个方法都接受一个基于0的字符位置的参数。
    charAt()方法以单字符串的形式返回给定位置的那个字符。
var str = 'hello world'
console.log(str.charAt(1)) //e

charCodeAt()返回的是该位置的字符串编码

var str = 'hello world'
console.log(str.charCodeAt(1)) //101

TIP: charCodeAt和charAt中如果传入的参数为负数或者大于该字符串的长度,charAt()返回的是空字符(""),charCodeAt()返回的是NAN。

2. 字符串操作方法
  • concat()
    用于将一个或者多个字符串拼接起来得到一个新的字符串。并不改变原来的字符串。
    concat()可以接受任意多个参数,也就是可以拼接任意多个字符串。
var str = 'hello '
var res = str.concat('world', '!')
console.log(res) //hello world
console.log(str) //hello

TIP: concat中传入的参数如果是非字符串,则会先调用toString方法尝试转换成字符串然后进行拼接

  • slice() substr() substing()
    以上三个方法都会返回被操作字符串的子字符串,而且都会接受一个或者两个参数。
    第一个参数指定子字符串的开始位置,第二个参数表示子字符串到哪里结束。
    slice()和substring()的第二个参数指定的是子字符串最后一个字符串后面的位置。
    substr()指定的是返回的字符串个数。
    以上三个方法和concat()不会修改字符串本身的值,只会返回一个基本类型的字符串。

slice()方法会将传入的负值与字符串的长度相加。substr()方法将负的第一个参数加上字符串的长度,而负的第二个参数转为0。substring()会将所有负值参数都转换为0,如果第二个参数比第一个大的话,那么会将两个参数位置进行交换

var str = 'hello world'
str.slice(3) // 'lo world'
str.substring(3) // 'lo world'
str.substr(3) // 'lo world'
str.slice(3, 7) //'lo w'
str.substring(3, 7) //'lo w'
str.substring(3, 7) //'lo worl'

var str = 'hello world'
str.slice(-3) //'rld' 从后往前数
str.substring(-3) //'hello world',会转为0,然后截取到最后就返回整个字符串了
str.substr(-3) //'rld',第一个参数从后往前数
str.slice(3, -4)// 'lo w',若第二个参数小于第一个参数,则返回空字符串
str.substring(3, -4) //'hel', 负数会转为0,然后交换0和3的位置
str.substr(3, -4) // ""会将负数转为0,然后如果第二个小于第一个则会返回空字符串 
3. 字符串位置方法
  • indexOf() lastIndexOf()
    这两个方法都是从一个字符串中搜索出给定的子字符串,然后返回子字符串的位置。如果没有找到该子字符串则返回-1
    这两个方法的区别在于indexOf()从字符串的开头向后搜索子字符串,lastIndexOf()方法是从字符串的末尾进行搜索。
var str = 'hello world'
console.log(str.indexOf('o')) //4
console.log(str.lastIndexOf('o')) //7

indexOf()和lastIndexOf()还可以接受第二个参数表示从第几位进行搜索。

  • trim()方法
    该方法会创建一个字符串的副本,删除前置以及后缀的所有空格,然后返回结果。
var str = '   hello world  '
console.log(str.trim()) //'hello world'
  • toLowerCase(), toLocaleLowerCase(), toUpperCase(), toLocaleUppercase()
    以上顾名思义是对字符串进行大小写的转换,特殊的是toLocaleLowerCase(),toLocaleUpperCase()是针对特定地区的实现。所以一般在不知道在哪种语言的环境中,使用针对地区的方法更精确一点。

  • match()
    该方法与RegExpexec()方法相同。
    该方法接受一个参数,要么是一个正则表达式,要么是一个RegExp对象。

var str = 'cat, bat, sat, fat'
var pattern = /.at/
var matches = str.match(pattern)
console.log(matches.index) //0
console.log(matches[0]) //'cat'
console.log(pattern.lastIndex) // 0

如上,match()方法返回一个数组。

  • search()
    该方法和match()方法的参数相同(字符串或者是RegExp对象指定的正则表达式)。
    该方法返回字符串中第一个匹配项的索引,如果没有找到匹配项则返回-1
var test = 'cat, bat, sat, fat'
var pos = test.search(/at/)
console.log(pos) // 1
  • replace()
    该方法可以用来进行替换字符串,方法可以接受两个参数。
    第一个参数可以是一个正则表达式或者是一个字符串,第二个参数可以是一个字符串或者是一个函数
    如果第一个是参数是一个字符串,那么只会替换第一个子字符串,如想要替换所有的子字符串,那么需要提供一个正则表达式,并且需要指定全局。
var text = 'cat, bat, sat, fat'
var res = text.replace('at', 'ond')
console.log(res) // 'cond, bat, sat, fat'
res = text.replace(/at/g, ''ond")
console.log(res) // "cond, bond, sond, fond"
  • split()
    该方法大家应该熟悉,会根据指定的分隔符将一个字符串分割成多个子字符串,然后组成一个数组。

  • localeCompare()
    该方法是比较两个字符串。
    如果字符串在字母表中应该排在字符串参数之前,则返回一个负数。
    如果字符串等于字符串参数则返回0。
    如果字符串在字母表中应该排在字符串参数之后,则返回一个正数。

  • fromCharCode()
    该方法是String构造函数的一个静态方法。该方法接受一个或者多个字符串编码,然后转换为一个字符串。

String.fromCharCode(104, 101, 108, 108, 111) //hello

以上就是关于JavaScript中字符串的一些基本操作。

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

推荐阅读更多精彩内容

  • Javascript有很多字符串的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,...
    顽皮的雪狐七七阅读 2,084评论 0 2
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,152评论 0 4
  • Javascript数组基本操作 Javascript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性...
    haveSnap阅读 262评论 0 0
  • 自从贝猫上了两岁,就展现了超强的行动力,说一不二,干什么都着急。想出门去玩,连穿条裤子的时间都等不及。想要喝牛奶,...
    妮秋儿阅读 440评论 0 0
  • 阿四走了很远很远的路,他很累,但是不敢停下,因为前日他在方羊山招惹了一伙盗匪,估摸着这时辰,那群盗匪还在阿四身后紧...
    新人素阅读 138评论 0 0