<ul id="qim0s"></ul>

吐槽Javascript系列一：slice()、substr()和 substring()

waltr 發(fā)布于2019-08-23 15:10 / 1590人閱讀

摘要：點評我們來看這樣一個例子給定一個字符串，要求去掉最后一個逗號。大膽假想一下，如果把踢出去，就保留和，你還會懵嗎或者更大膽一點，把和都踢出去，就只保留，我反正感覺整個世界都清靜了系列鏈接吐槽系列一和吐槽系列二數(shù)組中的和方法吐槽系列三數(shù)組的陷阱

實不相瞞，對于字符串中的slice()、substr()和 substring()這三個方法，我自己很長一段時間都是理不清的，每次用都得查一下文檔，因為他們長得實在是太像了。

特性

我們先來溫習(xí)一下，他們的特性如下：

這三個方法都會返回被操作字符串的一個子字符串，而且也都接受一或兩個參數(shù)

這三個方法都不會改變原字符串

第一個參數(shù)指定子字符串的開始位置，第二個參數(shù)（在指定的情況下）表示子字符串到哪里結(jié)束。具體來說，slice()和substring()的第二個參數(shù)指定的是子字符串最后一個字符后面的位置，而substr()的第二個參數(shù)指定的則是返回的字符個數(shù)

我們來看幾個簡單的例子：

const str = "hello world"
console.log(str.slice(3)) // lo world
console.log(str.substring(3)) // lo world
console.log(str.substr(3)) // lo world

console.log(str.slice(3, 7)) // lo w
console.log(str.substring(3, 7)) // lo w
console.log(str.substr(3, 7)) // lo worl

吐槽

substring()：slice()和substr()二位兄臺，非在下自大，你們能做的，我都能做！我感覺你們沒有存在的必要！
slice()：我們在傳入負(fù)值的時候，是不一樣的。

console.log(str.slice(-3)) // rld
console.log(str.substring(-3)) // hello world

substring()：我們當(dāng)然是有一些區(qū)別，但我想說的是你們能做的，我都能做！
substr()：非在下自大，我感覺你們能做的，我也都能做啊。
slice()：非在下自大，我感覺你們能做的，我也都能做啊。

點評

我們來看這樣一個例子：給定一個字符串，要求去掉最后一個逗號。

let str = "a,b,"
let newStr = str.substring(0, str.length - 1)

上面是substring()的寫法，我們在來看看slice()的寫法：

let str = "a,b,"
let newStr = str.slice(0, str.length - 1)

再來看看substr()的寫法：

let str = "a,b,"
let newStr = str.substr(0, str.length - 1)

這三個方法都能做到，并且寫法也完全一樣，這正是讓人容易困惑的地方！
還有一個要命的地方在于，數(shù)組中也有slice方法。
大膽假想一下，如果把substr()踢出去，就保留substring()和slice()，你還會懵嗎？
或者更大膽一點，把substr()和slice()都踢出去，就只保留substring()，我反正感覺整個世界都清靜了！

系列鏈接

吐槽Javascript系列一：slice()、substr()和 substring()
吐槽Javascript系列二：數(shù)組中的splice和slice方法
吐槽Javascript系列三：數(shù)組的陷阱