【JQuery應用】substr 與 substring 之間的差異

在JQuery中取字串可以使用substring以及substr這兩個方式來達到目的
可是一樣都是取字串為什麼還要有兩個不一樣的function呢?
今天就讓我們來比較一下兩者之間的差異吧~!

學習資訊

substring以及substr這兩個方法是在JavaScript中就有的方法
在JQuery之中也有而且使用的方式是一樣的喔

首先我們先來設定一個字串「hello world」來做為測試參數
然後分別來看一下substr 與 substring之間抓參數的方式
要注意一下字串的索引值都是從「0」開始的唷
substr抓取字串方式

為了讓大家方便了解所以舉兩個例子方便大家做比較
下述例子分別是指由索引值0以及7開始向後抓取字元直到最後一個字元為止
特別要注意的是空白鍵或是特殊字元都算都會占用一個索引喔

alert("hello world".substr(0));
//此處顯示結果為 hello world
alert("hello world".substr(7));
//此處顯示結果為 orld

而下述這個例子則是指由索引值3開始向後抓取8個字元

"hello world".substr(3,8)
//此處顯示結果為 lo world

substring 抓取字串方式

substring抓取字串一樣有兩種方式
首先是跟substr一樣只有指定一個參數
顯示出來的效果基本上也跟substring一樣沒有差異

alert("hello world".substring(0));
//此處顯示結果為hello world

但是如果是在給予兩個參數的狀況下
substr 與 substring 顯示的結果就不同了
先讓我們來看看以下幾個範例跟顯示結果

alert("hello world".substring(2,6));
//此處顯示結果為llo (有包含一個空格唷)
alert("hello world".substring(0,2));
//此處顯示結果為he
alert("hello world".substring(2,0));
//此處顯示結果為he

透過上述的「"hello world".substring(2,6)」這個例子我們可以發現
它在顯示時會包含起始索引位置的字元但是不會包含結束索引位置的字元
而在「hello world".substring(0,2)」與「hello world".substring(2,0)」的例子中我們可以發現
這兩個例子取出來的值是一樣的，透過這個訊息我們可以知道
substring是透過指定索引位址然後取出兩個索引值之間的字元(不會取出最大(結束)索引位置的值)
所以不管是取(0,2)還是(2,0)所顯示的值都會是一樣的


看完了上述兩個例子不知道大家有沒有了解substr 與 substring 之間的差異了呢?
這邊就稍微做個簡單的總結一下


substr(3,8)是指定起始索引位置，然後從起始的索引位置開始向後抓取指定的位置
是以3為起始位置然後向後抓取8個字元

substring(0,2)是指定任兩個索引位置，然後抓取出這兩個索引之間的值
且不包含最後一個索引位置的值

希望以上的說明能對各位有幫助