substring,substr,splice,slice区别

188 阅读6分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第23天,点击查看活动详情

前言:

因为我总是会搞混这几个的用法,所以记了下来,每遇到一次就过来翻看一次。

正文:

substr()

语法:str.substr(start, length)

参数:

start:开始提取字符串的位置。如果为负值,则被看作是strLength+'start',其中strLength为字符串的长度(例如,start的长度为-3,则被看作是strLength-3)

length:可选。提取的字符数。

描述:

start从索引0开始,最后一个索引自然为长度-1.substr从start位置提取length个字符。

  • 如果start为正值,且大于或等于字符串长度,则返回空字符串。
  • 如果start为负值,则substr把它作为字符串末尾开始的第一个字符索引。如果start为复制且大于整个字符串的长度,则substr默认从0开始提取索引。
  • 如果length为0或者复制,则sunstr返回一个空字符串。如果忽略length,则sunstr提取字符直到最末尾端。

示例:

var str = "abcdefghij";

console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc
console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
console.log("(-3): "     + str.substr(-3));    // (-3): hij
console.log("(1): "      + str.substr(1));     // (1): bcdefghij
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):

复制代码

substring()

语法:str.substring(indexStart, indexEnd)

参数:

indexStart:需要截取的第一个字符的索引,座位返回的首字母。

indexEnd:可选。一个0到字符串长度之间的整数,以该数字为索引的字符不包含在街区的字符串内。

描述:

substring提取从indexStart到indexEnd(不包括)之间的字符。

  • 如果indexStart等于indexEnd,substring返回一个空字符串。
  • 如果省略indexEnd,则substring返回一直到字符串末尾。
  • 如果任意参数小于0或者为NaN,则默认被当作0.
  • 如果任意参数大于字符串长度,则默认被当作字符串长度。
  • 如果indexStart大于indexEnd,则substring的执行效果就像两个参数调换了一样显示最终的结果。

示例:


// 输出 "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));//前者大于后者
console.log(anyString.substring(3,-3));
console.log(anyString.substring(3,NaN));NaN被当作0
console.log(anyString.substring(-2,3));//负数被当作0
console.log(anyString.substring(NaN,3));

// 输出 "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));//前者大于后者

// 输出 ""
console.log(anyString.substring(4,4));//相等返回空字符串

// 输出 "Mozill"
console.log(anyString.substring(0,6));

// 输出 "Mozilla"
console.log(anyString.substring(0,7));//大于总长度,则被当作总长度
console.log(anyString.substring(0,10));

复制代码

splice()

语法:str.slice(beginIndex, endIndex)

参数:

beginIndex:以0为基准,开始提取原字符串中的字符。如果值为负值,会被当作strLength+beginIndex看待(例如:beginIndex是-3,则被看作是strLength-3)

endIndex:可选。以0为基准,结束提取原字符串中的字符。如果省略该参数,splice()会一直提取到字符串末尾。如果该参数为负数,同上(例如是endIndex是-3,则被看作是strLength-3)

描述:

splice()从一个字符串中提取字符串并返回新字符串。在一个字符串中的改变不会影响另一个字符串,也就是说,splice不会修改源字符串(只会返回一个原字符串中部分字符的新字符串)

splice()提取的新字符串包括beginIndex但不包括endIndex.

例子:

var str1 = 'The morning is upon us.', // str1 的长度 length 是 23str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -2),
    str4 = str1.slice(12),
    str5 = str1.slice(30);
console.log(str2); // 输出:he morn
console.log(str3); // 输出:morning is upon u
console.log(str4); // 输出:is upon us.
console.log(str5); // 输出:""

复制代码

split()

语法:str.split(separator, limit)

参数:

separator:指定表示每个拆分应发生的点的字符串,可以是字符串也可以是正则表达式。

limit:一个整数,限定返回的分割片段数量。当提供此参数时,split方法会在指定分隔符的每次出现时分割该字符串,但在限制条乙方如数组时停止。如果在达到指定限制之前达到字符串的末尾,它可能仍然包括少于限制的条目。新数组中不返回剩下的文本。

描述:

找到分隔符后,将其从字符串中删除,并将子字符串的数组返回。如果没有找到或者省略了分隔符,则该数组包含一个由整个字符串组成的元素。如果分隔符为空字符串,则将str转换为字符数组。如果分隔符出现在字符串的开始或者结尾,或两者都分开,分别以空字符串开头,结尾或两者开始和结束。因此,如果字符串仅由一个分隔符实例组成,则该数组由两个空字符串组成。

示例:

var myString = "Hello 1 word. Sentence number 2.";
var splits = myString.split(/(\d)/);

console.log(splits);
输出:[ "Hello ", "1", " word. Sentence number ", "2", "." ]
上例中,分割的标识为空格,所以,返回已分开空格后的数组。
复制代码
var myString = "Hello World. How are you doing?";
var splits = myString.split(" ", 3);

console.log(splits);
输出["Hello", "World.", "How"]
上例中,`split` 查找字符串中的 0 或多个空格,并返回找到的前 3 个分割元素(splits)。
复制代码

slice()

语法:arr.slice(begin,end)

参数:

begin:可选,提取起始处的索引,从0开始,如果为负数,则从原数组中的倒数第几个元素开始提取,slice(-2)表示提取原数组中的倒数第二个元素刀片最后一个元素(包括最后一个元素),如果省略begin,则从索引0开始,如果begin超过原数组的索引范围,则返回空数组。

end:可选。在该索引处终止提取原数组的元素。slice会提取原数组中索引从begin到end的所有元素(包括begin但不包括end)。slice(1,4)会提取原数组中从第二个元素开始一直到第四个的所有元素(索引为1,2,3的元素)。如果该参数为负数,则它表示在原数组中的倒数第几个元素结束抽取。slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包括最后一个元素,也就是只是倒数第二个元素),如果end被省略,则slice会一直提取到原数组末尾。如果end大于数组的长度,slice也会一直提取都原数组的末尾。

返回值是一个被提取元素的新数组。

描述:

slice不会修改原数组,只会返回一个千夫指了原数组中的元素的一个新数组,

示例:

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] 不会修改原数组
// citrus contains ['Orange','Lemon']