快捷導(dǎo)航

js substr、substring和slice使用說明小記

更新時間：2011年09月15日 16:30:00 作者：

關(guān)于substr、substring和slice方法區(qū)別的文章，網(wǎng)上搜到了許多，文章內(nèi)容也基本一致。而后，我將其中一篇文章中的代碼挪到本地進行了測試，發(fā)現(xiàn)測試結(jié)果和原文中的有些出入。

關(guān)于substr、substring和slice方法區(qū)別的文章，網(wǎng)上搜到了許多，文章內(nèi)容也基本一致。而后，我將其中一篇文章中的代碼挪到本地進行了測試，發(fā)現(xiàn)測試結(jié)果和原文中的有些出入。

我更相信自己親自驗證過后的代碼，隨后小記下來，供以后查閱。

substr

復(fù)制代碼代碼如下:

 
document.write("|" + str.substr(0,5) + "|" + "<br />"); 
document.write("|" + str.substr(0) + "|" + "<br />"); 
document.write("|" + str.substr(5,1) + "|" + "<br />"); 
document.write("|" + str.substr(-5,2) + "|" + "<br />"); 
document.write("|" + str.substr(-2,-5) + "|" + "<br />"); 

打印效果

|12345|
|123456|
|6|
IE: |12| Chrome: |23|

substring

復(fù)制代碼代碼如下:

 
document.write("|" + str.substring(0,5) + "|" + "<br />"); 
document.write("|" + str.substring(0) + "|" + "<br />"); 
document.write("|" + str.substring(5,1) + "|" + "<br />"); 
document.write("|" + str.substring(-5,2) + "|" + "<br />"); 
document.write("|" + str.substring(-2,-5) + "|" + "<br />"); 
document.write("|" + str.substring(2,-5) + "|" + "<br />"); 

打印效果
|12345|
|123456|
|2345|
|12|

|12|
slice

復(fù)制代碼代碼如下:

 
document.write("|" + str.slice(0,5) + "|" + "<br />"); 
document.write("|" + str.slice(0) + "|" + "<br />"); 
document.write("|" + str.slice(5,1) + "|" + "<br />"); 
document.write("|" + str.slice(-5,2) + "|" + "<br />"); 
document.write("|" + str.slice(-2,-5) + "|" + "<br />"); 
document.write("|" + str.slice(2,-5) + "|" + "<br />"); 

打印效果
|12345|
|123456|

|2|

||
如果你預(yù)想的結(jié)果和打印效果完全一致，那你的基本功一定不賴。如果多少有點猶豫或者結(jié)果出乎你的意料，那我的文章多少也有點用處了。

總結(jié)

substr

該方法的arg2和其它兩個方法的arg2壓根就代表不同意義，所以單獨揪出來。

當(dāng)arg1<0時，不同瀏覽器的結(jié)果不同。IE 直接將arg1改成0， Chrome 下標(biāo)讀取方式由原來的從左往右讀改成從右往左讀

substring和slice

(1)arg2 > arg1，即參數(shù)2大于參數(shù)1時

substring：自動顛倒位置，數(shù)值大的在arg2位置上，數(shù)值小的在arg1位置上
slice：返回空字符串

(2)對負數(shù)的處理

substring：將數(shù)值為負數(shù)的參數(shù)轉(zhuǎn)換為0
slice：將數(shù)值為負數(shù)的參數(shù)轉(zhuǎn)換為(字符串長度-參數(shù)數(shù)值)

您可能感興趣的文章:

相關(guān)文章

js動態(tài)獲取時間的方法分析
這篇文章主要介紹了js動態(tài)獲取時間的方法,結(jié)合實例形式分析了javascript日期時間計算與頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-08-08
IE8中使用javascript動態(tài)加載CSS的解決方法
這篇文章主要介紹了IE8中使用javascript動態(tài)加載CSS的解決方法,此方法也不是很完美,需要的朋友參考下吧
2014-06-06
javascript 瀏覽器類型和版本號檢測代碼(兼容多瀏覽器)
果對javascript了解不是特別深入的話,很容易就會寫出不兼容的代碼(就像我),這時候就得判斷瀏覽器了。比如事件偵聽、一些鼠標(biāo)和鍵盤事件、Range等,一些都會不一樣.下面列出幾種常用的檢測瀏覽器方法，以饗觀眾!
2010-04-04
JavaScript中的ArrayBuffer詳細介紹
這篇文章主要介紹了JavaScript中的ArrayBuffer詳細介紹,本文講解了Array 在內(nèi)存中的堆棧模型、原始緩沖區(qū)的創(chuàng)建、數(shù)據(jù)化數(shù)組、DataView對象、XHR2 中的 ArrayBuffer等內(nèi)容,需要的朋友可以參考下
2014-12-12
Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件實例解析
本文通過實例代碼給大家介紹了Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-06-06
JS模擬實現(xiàn)Excel條件格式中的色階效果
這篇文章主要為大家詳細介紹了如何利用JavaScript模擬實現(xiàn)Excel條件格式中的色階效果，文中的示例代碼講解詳細，感興趣的小伙伴可以嘗試一下
2023-05-05
利用JavaScript如何查詢某個值是否數(shù)組內(nèi)
這篇文章主要給大家介紹了關(guān)于利用JavaScript如何查詢某個值是否數(shù)組內(nèi)的相關(guān)資料，文中通過示例代碼分別介紹了實現(xiàn)該問題的一些解決方法是否可行，需要的朋友可以參考借鑒，下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
JavaScript返回網(wǎng)頁中錨點數(shù)目的方法
這篇文章主要介紹了JavaScript返回網(wǎng)頁中錨點數(shù)目的方法,涉及javascript使用document.anchors獲取錨點數(shù)目的技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
js實現(xiàn)鼠標(biāo)滑過文字鏈接色彩變化的效果
這篇文章主要介紹了js實現(xiàn)鼠標(biāo)滑過文字鏈接色彩變化的效果,涉及javascript鼠標(biāo)事件及樣式操作的技巧,非常具有實用價值,需要的朋友可以參考下
2015-05-05
JS實現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果
這篇文章主要介紹了JS實現(xiàn)可自定義大小，可雙擊關(guān)閉的彈出層效果,涉及JavaScript定時函數(shù)及頁面元素動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10