JavaScript實(shí)現(xiàn)字符串截取的三個方法總結(jié)
在 JavaScript 中,可以使用 substr()、slice() 和 substring() 方法截取字符串。
substring()
substring() 方法返回一個字符串在開始索引到結(jié)束索引之間的一個子集,或從開始索引直到字符串的末尾的一個子集。語法如下:
str.substring(indexStart[, indexEnd])
參數(shù)說明:
indexStart:需要截取的第一個字符的索引,該索引位置的字符作為返回的字符串的首字母。indexEnd:可選。一個0到字符串長度之間的整數(shù),以該數(shù)字為索引的字符不包含在截取的字符串內(nèi)。
如果 startIndex 大于 endIndex,則會交換它們的位置。來看一段示例代碼:
let str = "深耕WEB開發(fā)10+年,擁有一顆工匠的心"; console.log(str.substring(7)); // 10+年,擁有一顆工匠的心 console.log(str.substring(0, 5)); // 深耕WEB console.log(str.substring(7, 5)); // 開發(fā) console.log(str.substring(5, 5)); // 空
substr()
substr() 方法返回一個字符串中從指定位置開始到指定字符數(shù)的字符。語法如下:
str.substr(start[, length])
第一個參數(shù)是截取開始的位置,第二個參數(shù)是截取的長度。如下代碼:
let str = "深耕WEB開發(fā)10+年,擁有一顆工匠的心"; let result = str.substr(1, 4); console.log(result); // 耕WEB
上述代碼的 1 表示從第二個字符開始截取,4 表示截取的長度為 4 個字符。
substr() 方法在截取字符串時是基于字符位置的,如果截取長度超過了字符串的長度,它會一直截取到字符串的末尾。如果第一個參數(shù)是負(fù)數(shù),則從字符串的末尾開始計數(shù)。
如果可以的話,建議使用 substring() 來取代 substr()。
slice()
slice() 方法提取某個字符串的一部分,并返回一個新的字符串,且不會改動原字符串,與 substring() 方法類似。語法如下:
str.slice(startIndex, endIndex)
其中,startIndex 表示要截取的子字符串的起始位置(包含該位置),endIndex 表示要截取的子字符串的結(jié)束位置(不包含該位置)。如果只傳入 startIndex,則會從該位置一直截取到字符串末尾。如果 startIndex 大于 endIndex,則會返回空字符串。例如:
let str = "深耕WEB開發(fā)10+年,擁有一顆工匠的心"; console.log(str.slice(7)); // 10+年,擁有一顆工匠的心 console.log(str.slice(0, 5)); // 深耕WEB console.log(str.slice(7, 5)); // "" console.log(str.slice(5, 5)); // ""
substring()和substr()的區(qū)別
substring() 和 substr() 都是截取字符串的方法,但它們有以下區(qū)別:
- 參數(shù)不同:
substring()方法的第一個參數(shù)是起始位置,第二個參數(shù)是終止位置(不包括該位置的字符);substr()方法的第一個參數(shù)是起始位置,第二個參數(shù)是截取的長度。 - 負(fù)數(shù)處理不同:
substring()方法不接受負(fù)數(shù)參數(shù),如果傳入負(fù)數(shù),會被自動轉(zhuǎn)換為0;substr()方法可以接受負(fù)數(shù)參數(shù),表示倒數(shù)計數(shù)。 - 返回值不同:
substring()方法返回從起始位置到終止位置之間的字符;substr()方法返回從起始位置開始指定長度的字符。
ES6中新增了 slice() 方法,但它和 substring() 方法非常相似,也是接受起始位置和終止位置作為參數(shù),不同之處是slice() 方法可以接受負(fù)數(shù)參數(shù),表示從字符串末尾開始計數(shù)。substr() 雖然沒有被完全遺棄,但還是建議使用 substring() 來取代 substr()。
方法補(bǔ)充
除了上述的方法,小編還為大家整理了其他的實(shí)現(xiàn)方法,希望對大家有所幫助
Javascript截取字符串中包含中文的方法
第一種方法:
String.prototype.sub=function(n){
var r=/[^\x00-\xff]/g;
if(this.replace(r,"mm").length<=n){return this;}
var m=Math.floor(n/2);
for(var i=m;i<this.length;i++){
if(this.substr(0,i).replace(r,"mm").length>=n){
return this.substr(0,i)+"...";
}
}
return this;
} 第二種方法:
截取字符串 包含中文處理,參數(shù)含義:(字符串,截取長度,是否增加...)
function subString(str, len, hasDot){
var newLength=0;
var newStr="";
var chineseRegex=/[^\x00-\xff]/g;
var singleChar='';
var strLength=str.replace(chineseRegex,'**').length;
for(var i=0;i < strLength;i++){
singleChar=str.charAt(i).toString();
if(singleChar.match(chineseRegex) != null){
newLength+=2;
}else{
newLength++;
}
if(newLength>len){
break;
}
newStr+=singleChar;
}
if(hasDot && strLength>len){
newStr+='...';
}
return newStr;
}
到此這篇關(guān)于JavaScript實(shí)現(xiàn)字符串截取的三個方法總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript字符串截取內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
頁面縮放兼容性處理方法(zoom,Firefox火狐瀏覽器)
下面小編就為大家?guī)硪黄撁婵s放兼容性處理方法(zoom,Firefox火狐瀏覽器)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式
這篇文章主要給大家介紹了關(guān)于Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式的相關(guān)資料,echarts的圖表配置非常的靈活自由,但是不熟悉的時候容易不知道怎么配置,需要的朋友可以參考下2023-06-06
JS圖片懶加載的優(yōu)點(diǎn)及實(shí)現(xiàn)原理
這篇文章主要介紹了JS圖片懶加載的優(yōu)點(diǎn)及實(shí)現(xiàn)原理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
echarts中tooltip添加點(diǎn)擊事件代碼示例
這篇文章主要給大家介紹了關(guān)于echarts中tooltip添加點(diǎn)擊事件的相關(guān)資料,echarts tooltip點(diǎn)擊事件是指當(dāng)用戶點(diǎn)擊圖表中的提示框(tooltip)時觸發(fā)的事件,需要的朋友可以參考下2023-07-07
javascript獲取本機(jī)操作系統(tǒng)類型的方法
關(guān)于我們使用電腦的操作系統(tǒng),我們通過鼠標(biāo)點(diǎn)擊就能獲取,如果我們想用腳本怎么實(shí)現(xiàn)javascript獲取本機(jī)操作系統(tǒng)類型的方法呢,下面給大家分享javascript獲取本機(jī)操作系統(tǒng)類型的方法,需要的朋友可以參考下2015-08-08
js獲取input長度并根據(jù)頁面寬度設(shè)置其大小及居中對齊
這篇文章主要介紹了js獲取input長度并根據(jù)頁面寬度設(shè)置其大小及居中對齊的方法,需要的朋友可以參考下2014-08-08

