js字符串截取函数substr substring slice使用对比

JS中操作字符串的时候，会用到截取字符串的函数，这篇攻略介绍substr、substring和slice三种常用的截取字符串函数，并进行对比。

substr

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法：string.substr(start, length)

参数说明：
- start：必需，一个整数，规定字符串中开始抽取的位置。
- length：可选，一个整数，规定被抽取的字符数。

示例1：

const str = "This is a string.";
const newStr = str.substr(5, 2);
console.log(newStr);  // is

示例2：

const str = "This is a string.";
const newStr = str.substr(5);
console.log(newStr);  // is a string.

substring

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法：string.substring(start, end)

参数说明：
- start：必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
- end：可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

示例1：

const str = "This is a string.";
const newStr = str.substring(5, 7);
console.log(newStr);  // is

示例2：

const str = "This is a string.";
const newStr = str.substring(5);
console.log(newStr);  // is a string.

slice

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法：string.slice(start, end)

参数说明：
- start：必需，一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
- end：可选，一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回从 start 到字符串的结尾的所有字符。

示例1：

const str = "This is a string.";
const newStr = str.slice(5, 7);
console.log(newStr);  // is

示例2：

const str = "This is a string.";
const newStr = str.slice(5);
console.log(newStr);  // is a string.

对比

• start 参数传入负数时，slice()和substring()方法会将其算作从字符串末尾开始计数的位置，而substr()方法则会将其解释为从0开始计数的位置。
• 两种方法的参数 end 的具体作用和定义也不同。在 substring()方法中，第二个参数表示返回字符串的最后一个被截取字符的后一位的下标；同时，如果第二个参数缺省，则默认将字符串长度作为被截取字符串的结束位置。而 slice()方法则是需要传两个参数，这两个参数分别代表了被截取字符串的开始位置和结束位置；如果第一个参数为负数，则从末尾开始截取。
• 对于截取长度为负数或为0的字符串，substr()方法在所有浏览器中都返回空字符串；而在 Firefox 和 Safari 中，slice()方法返回空字符串，而在 Opera 中返回原字符串；而 substring()方法在除 Firefox 以外的所有浏览器中都返回空字符串。

总体而言，三种方法都可以用于截取字符串，但因为参数意义的不同，所以应该根据实际需要选择合适的方法。