JavaScript字符串截取方法總結(jié)(slice、substring、substr等)
一、使用 slice() 截取
1,函數(shù)說明
slice() 方法可通過指定的開始和結(jié)束位置,提取字符串的某個(gè)部分,并以新的字符串返回被提取的部分。語(yǔ)法如下:
參數(shù)說明:
- start(必需):規(guī)定從何處開始選取。如果是負(fù)數(shù),那么它規(guī)定從字符串尾部開始算起的位置。也就是說,-1 指最后一個(gè)字符,-2 指倒數(shù)第二個(gè)字符,以此類推。
- end(可選):規(guī)定從何處結(jié)束選取,即結(jié)束處的字符下標(biāo)。如果沒有指定該參數(shù),那么截取的字符串包含從 start 到結(jié)束的所有字符。如果這個(gè)參數(shù)是負(fù)數(shù),那么它規(guī)定的是從數(shù)組尾部開始算起的字符。
2,使用樣例
var str = "0123456789"; console.log("原始字符串:", str); console.log("從索引為3的字符起一直到結(jié)束:", str.slice(3)); //3456789 console.log("從倒數(shù)第3個(gè)字符起一直到結(jié)束:", str.slice(-3)); //789 console.log("從開始一直到索引為5的前一個(gè)字符:", str.slice(0,5)); //01234 console.log("從開始一直到倒數(shù)第3個(gè)字符的前一個(gè)字符:", str.slice(0,-3)); //0123456 console.log("從索引為3的字符起到索引為5的前一個(gè)字符:", str.slice(3,5)); //34 console.log("從索引為3的字符起到倒數(shù)第3個(gè)字符的前一個(gè)字符:", str.slice(3,-3)); //3456
運(yùn)行結(jié)果如下:
二、使用 substring() 截取
1,函數(shù)說明
(1)substring 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。語(yǔ)法如下:
stringObject.substring(start, stop)
參數(shù)說明:
- start(必需):一個(gè)非負(fù)的整數(shù),規(guī)定要提取的子串的第一個(gè)字符在 stringObject 中的位置。
- stop(可選):一個(gè)非負(fù)的整數(shù),比要提取的子串的最后一個(gè)字符在 stringObject 中的位置多 1。
返回值說明:
該方法返回一個(gè)新的字符串,該字符串值包含 stringObject 的一個(gè)子字符串,其內(nèi)容是從 start 處到 stop-1 處的所有字符,其長(zhǎng)度為 stop 減 start。
(2)注意事項(xiàng):
- 如果 start 與 end 相等,那么該方法返回的就是一個(gè)空串(即長(zhǎng)度為 0 的字符串)。
- 如果 start 比 end 大,那么該方法在提取子串之前會(huì)先交換這兩個(gè)參數(shù)。
- 如果 start 或 end 為負(fù)數(shù),那么它將被替換為 0。
2,使用樣例
var str = "0123456789"; console.log("原始字符串:", str); console.log("從索引為3的字符起一直到結(jié)束:", str.substring(3)); //3456789 console.log("從索引為20的字符起一直到結(jié)束:", str.substring(20)); // console.log("從索引為3的字符起到索引為5的前一個(gè)字符結(jié)束:", str.substring(3,5)); //34 console.log("start比end大會(huì)自動(dòng)交換,結(jié)果同上:", str.substring(5,3)); //34 console.log("從索引為3的字符起到索引為20的前一個(gè)字符結(jié)束:", str.substring(3,20)); //3456789
運(yùn)行結(jié)果如下:
三、使用 substr() 截取
1,函數(shù)說明
substr 方法用于返回一個(gè)從指定位置開始的指定長(zhǎng)度的子字符串。語(yǔ)法如下:
stringObject.substr(start, length)
start(必需):所需的子字符串的起始位置。字符串中的第一個(gè)字符的索引為 0。
length(可選):在返回的子字符串中應(yīng)包括的字符個(gè)數(shù)。
(2)注意事項(xiàng):
- 如果 length 為 0 或負(fù)數(shù),將返回一個(gè)空字符串。
- 如果沒有指定 length,則子字符串將延續(xù)到 stringObject 的最后。
- 如果 start 或 length 為負(fù)數(shù),那么它將被替換為 0。
2,使用樣例
var str = "0123456789"; console.log("原始字符串:", str); console.log("從索引為3的字符起一直到結(jié)束:", str.substr(3)); //3456789 console.log("從索引為20的字符起一直到結(jié)束:", str.substr(20)); // console.log("從索引為3的字符起截取長(zhǎng)度為5的字符串:", str.substr(3,5)); //34567 console.log("從索引為3的字符起截取長(zhǎng)度為20的字符串:", str.substr(3,20)); //3456789
運(yùn)行結(jié)果如下:
附:其他一些常用的方法
下面這些函數(shù)可以輔助我們進(jìn)行字符串的截取工作。
1,indexOf()
返回字符串中匹配子串的第一個(gè)字符的下標(biāo)。
var str = "JavaScript"; var i1 = str.indexOf("a"); //1 var i2 = str.indexOf("S"); //4 var i3 = str.indexOf("Script"); //4 var i4 = str.indexOf("k"); //-1 console.log("原始字符串:", str); console.log("a的索引:", i1); console.log("S的索引:",i2); console.log("Script的索引:",i3); console.log("k的索引:",i4);
運(yùn)行結(jié)果如下:
2,lastIndexOf()
該方法返回從右向左出現(xiàn)某個(gè)字符或字符串的首個(gè)字符索引值(與 indexOf 相反)
var str = "JavaScript"; var i1 = str.lastIndexOf("a"); //3 var i2 = str.lastIndexOf("S"); //4 var i3 = str.lastIndexOf("Script"); //4 var i4 = str.lastIndexOf("k"); //-1
3,split()
使用一個(gè)指定的分隔符把一個(gè)字符串分割存儲(chǔ)到數(shù)組。
var str = "jpg|bmp|gif|ico|png"; var arr= str.split("|"); console.log(arr);
運(yùn)行結(jié)果如下:
4,join()
使用一個(gè)指定的分隔符將一個(gè)數(shù)組合并為一個(gè)字符串。
var arr= new Array("jpg","bmp","gif","ico","png"); var str = arr.join("|"); console.log(str);
運(yùn)行結(jié)果如下:
5,concat()
將兩個(gè)數(shù)組連接在一起。
var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr3 = arr1.concat(arr2); console.log(arr3);
運(yùn)行結(jié)果如下:
6,charAt()
返回指定位置的字符。字符串中第一個(gè)字符的下標(biāo)是 0。如果參數(shù) index 不在 0 與 string.length 之間,該方法將返回一個(gè)空字符串。
var str = "abcdefg"; var char = str.charAt(2); //c console.log(char);
運(yùn)行結(jié)果如下:
以上就是JavaScript字符串截取方法總結(jié)(slice、substring、substr等)的詳細(xì)內(nèi)容,更多關(guān)于JavaScript字符串截取的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript實(shí)現(xiàn)替換字符串中最后一個(gè)字符的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)替換字符串中最后一個(gè)字符的方法,涉及javascript字符串的轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-03-03javascript將浮點(diǎn)數(shù)轉(zhuǎn)換成整數(shù)的三個(gè)方法
將浮點(diǎn)數(shù)轉(zhuǎn)換成整數(shù)方法有很多,本例為大家介紹常用的三個(gè)方法,如果讀者想到其他好用方法,也可以交流一下2014-06-06利用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器
日期選擇器在我們平時(shí)開發(fā)的時(shí)候經(jīng)常要用到,下面這篇文章主要給大家介紹了利用Query+bootstrap和js這兩種方式實(shí)現(xiàn)日期選擇器的方法,文中兩種方法都給出了詳細(xì)的示例代碼,有需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01原生javascript實(shí)現(xiàn)addClass,removeClass,hasClass函數(shù)
這篇文章主要介紹了原生javascript實(shí)現(xiàn)addClass,removeClass,hasClass函數(shù)的相關(guān)代碼,有需要的小伙伴可以參考下2016-02-02mui框架 頁(yè)面無法滾動(dòng)的解決方法(推薦)
下面小編就為大家分享一篇mui框架 頁(yè)面無法滾動(dòng)的解決方法(推薦),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01通過復(fù)制Table生成word和excel的javascript代碼
通過復(fù)制Table生成word和excel,個(gè)人感覺這個(gè)功能還是比較實(shí)用的,下面有個(gè)不錯(cuò)的示例,希望對(duì)大家有所幫助2014-01-01客戶端 使用XML DOM加載json數(shù)據(jù)的方法
我們?nèi)〕鰯?shù)據(jù)后可以以json的形式傳到前端處理,也可以以Xml Dom的形式傳到前端進(jìn)行處理。下邊例子是利用Jquery處理XML Dom的例子。2010-09-09詳解如何在Canvas上實(shí)現(xiàn)坐標(biāo)定位
這篇文章我們將來詳細(xì)的給大家講解一下如何在 canvas 上實(shí)現(xiàn)坐標(biāo)的定位,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08原生JavaScript實(shí)現(xiàn)購(gòu)物車效果
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)購(gòu)物車效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07