JS常用字符串方法总结

本文目录
第一部分:常用字符串方法
1.查找字符串

  • indexOf(substr, [start])
  • lastIndexOf(substr, [start])
  • match(regexp)
  • search(regexp)
  • charAt(x)

2.类型转换

  • split(delimiter, [limit])

3.替换字符串

  • replace(regexp/substr, replacetext)

4.大小写转换

  • toLowerCase()
  • toUpperCase()

5.拼接字符串

  • concat(v1,v2..)

6.提取字符串

  • slice(start, [end])
  • substr(start, [length])
  • substring(from, [to])

7.其他常用方法

  • fromCharcode(c1,c2)
  • includes()
  • endsWith()
  • trim()

第二部分:字符串基础知识

  • 8.字符串的创建
  • 9.转义符

1.查找字符串

1.1.indexOf(substr, [start])

indexOf方法搜索并(如果找到)返回字符串中搜索到的字符或子字符串的索引。如果没有找到,则返回-1Start是一个可选参数,指定字符串中开始搜索的位置,默认值为0

//indexOf(char/substring)
var sentence="Hi, my name is Sam!"
if (sentence.indexOf("Sam")!=-1)
alert("Sam is in there!")

1.2.lastIndexOf(substr, [start])

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引, 如果未找到,则返回-1。“Start”是一个可选参数,指定字符串中开始搜索的位置, 默认值为string.length-1

//lastIndexOf(substr, [start])
var myString = 'javascript rox';
console.log(myString.lastIndexOf('r'));
//output: 11

1.3.match(regexp)

根据正则表达式在字符串中搜索匹配项。匹配成功返回一个数组,其中存放了与它找到的匹配文本有关的信息。返回的数组的第0个元素存放的是匹配文本。如果没有找到匹配项,则返回一个信息数组或null

var intRegex = /[0-9 -()+]+$/;
var myNumber = '999';
var myInt = myNumber.match(intRegex);
console.log(myInt);
//output: Array(1)
 
var myString = '999 JS Coders';
var myInt = myString.match(intRegex);
console.log(myInt);
//output: null

1.4.search(regexp)

search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,如果找到,返回与 regexp 相匹配的子串的起始位置,否则返回 -1
search()和indexOf()差不多,但是search() 方法无法设置第二个开始位置参数。

//search(regexp)
var intRegex = /[0-9 -()+]+$/;
 
var myNumber = '999';
var isInt = myNumber.search(intRegex);
console.log(isInt);
//output: 0

1.5. charAt(x)

charAt(x)返回字符串中x位置的字符,下标从 0 开始。

//charAt(x)
var myString = 'jQuery FTW!!!';
console.log(myString.charAt(7));
//output: F

charAt() 告诉我们字符串也可以像数组一样,通过下标属性去访问。
使用属性访问有点不太靠谱:

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

所以,如果您希望按照数组的方式处理字符串,可以先把它转换为数组。

2.类型转换

2.1.split(delimiter, [limit])

split() 方法用于把一个字符串分割成字符串数组,返回一个字符串数组返回的数组中的字串不包括 delimiter自身。可选的“limit”是一个整数,允许各位指定要返回的最大数组的元素个数。

3.替换字符串

3.1.replace(regexp/substr, replacetext)

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

//replace(substr, replacetext)
var myString = '999 JavaScript Coders';
console.log(myString.replace(/JavaScript/i, "jQuery"));
//output: 999 jQuery Coders
 
//replace(regexp, replacetext)
var myString = '999 JavaScript Coders';
console.log(myString.replace(new RegExp( "999", "gi" ), "The"));
//output: The JavaScript Coders

4.大小写转换

4.1.toLowerCase()

toLowerCase() 方法用于把字符串转换为小写。

//toLowerCase()
var myString = 'JAVASCRIPT ROX';
myString = myString.toLowerCase();
console.log(myString)
//output: javascript rox

4.2.toUpperCase()

toUpperCase() 方法用于把字符串转换为大写。

//toUpperCase()
var myString = 'javascript rox';
myString = myString.toUpperCase();
console.log(myString)
//output: JAVASCRIPT ROX

5.拼接字符串

5.1.concat(v1,v2..)

concat() 方法用于连接两个或多个字符串,此方法不改变现有的字符串,返回拼接后的新的字符串。

//concat(v1, v2,..)
var message="Sam"
var final=message.concat(" is a"," hopeless romantic.")
//alerts "Sam is a hopeless romantic."
alert(final)

6.提取字符串

6.1.slice(start, [end])

slice() 方法可提取字符串的某个部分,返回一个新的字符串。包括字符串从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。

//slice(start, end)
var text="excellent"
text.slice(0,4) //returns "exce"
text.slice(2,4) //returns "ce"

6.2.substr(start, [length])

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。返回一个新的字符串,包含从 start(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到该字符串的结尾的字符。

6.3.substring(from, [to])

substring() 方法用于提取字符串中介于两个指定下标之间的字符,方返回的子串包括 start 处的字符,但不包括 stop 处的字符,to 可选,如果省略该参数,那么返回的子串会一直到字符串的结尾。

//substring(from, [to])
var myString = 'javascript rox';
myString = myString.substring(0,10);
console.log(myString)
//output: javascript

slice,substr,substring三种方法总结:

var intStr ="祖国的花朵就是八九点钟的大太阳"
var sliceStr = intStr.slice(3,8)
var substrStr = intStr.substr(3,5)
var substringStr = intStr.substring(3,8)
console.log(sliceStr)
console.log(substrStr)
console.log(substringStr)

打印出来的三个变量都是一样的花朵就是八

7.其他常用方法

7.1.fromCharcode(c1,c2)

fromCharcode(c1,c2)转换一组Unicode值转换为字符。

//fromCharCode(c1, c2,...)
console.log(String.fromCharCode(97,98,99,120,121,122))
//output: abcxyz
console.log(String.fromCharCode(72,69,76,76,79))
//output: HELLO

7.2. includes()

includes() 方法用于检查字符串是否包含指定的字符串或字符,返回值是布尔类型。

//includes()
var mystring = "Hello, welcome to edureka";
var n = mystring.includes("edureka");
//output: True

7.3. endsWith()

endsWith()函数检查字符串是否以指定的字符串或字符结束。

//endsWith()
var mystr = "List of javascript functions";
var n = mystr.endsWith("functions");
//output: True

7.4. trim()

trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR)

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

第二部分

8.字符串的创建

通常,JavaScript 字符串是原始值,通过字面量方式创建:

var firstName = "Bill"

但是字符串也可通过关键词 new 定义为对象:

var firstName = new String("Bill")

实例

var x = "Bill";
var y = new String("Bill");
  • typeof x 将返回 string
  • typeof y 将返回 object

注意:请不要把字符串创建为对象。它会拖慢执行速度。
new 关键字使代码复杂化。也可能产生一些意想不到的结果:
当使用 == 相等运算符时,相等字符串是相等的:
实例

var x = "Bill";             
var y = new String("Bill");

(x == y) 为 true,因为 x 和 y 的值相等
当使用 === 运算符时,相等字符串是不相等的,因为 === 运算符需要类型和值同时相等。
实例

var x = "Bill";             
var y = new String("Bill");

(x === y) 为 false,因为 x 和 y 的类型不同(字符串与对象)
甚至更糟。对象无法比较:
实例

var x = new String("Bill");             
var y = new String("Bill");

(x == y) 为 false,因为 x 和 y 是不同的对象
注意:new出来的变量类型都是对象,如数值

var x = 123;
var y = new Number(123);

// typeof x 返回 number
// typeof y 返回 object

请尽量减少用new创建字符串、数值等对象,这都会让简单的事情复杂化,并拖慢代码运行速度。
另外强调一点的是,所有字符串方法都会返回新字符串。它们不会修改原始字符串。
正式地说:字符串是不可变的:字符串不能更改,只能替换。

9.转义符

字符串中的一些特殊字符有时候会被JS进行错误的解析。
比如下面这种情况

var txt="We are the so-called "Vikings" from the north."
document.write(txt)

在 JavaScript 中,字符串使用单引号或者双引号来起始或者结束。这意味着上面的字符串将被截为:We are the so-called。实际解析中,非但不会输入任何内容,还会报错
index.html:12 Uncaught SyntaxError: Unexpected identifier
要解决这个问题,就必须把在 "Viking" 中的引号前面加上反斜杠 ()。这样就可以把每个双引号转换为字面上的字符串。

var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)

现在 JavaScript 就可以输出正确的文本字符串了:We are the so-called "Vikings" from the north。
下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到文本字符串中:

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

推荐阅读更多精彩内容