JavaScript字符串截取方法详解：Slice、Substring与Substr的区别

JavaScript字符串截取方法概述

在JavaScript中，提取子字符串主要依赖于 Slice、Substring 和 Substr 这三个内置方法。

// slice
// 语法: string.slice(start [, stop])
"Good news, everyone!".slice(5,9);
// 'news'
// substring 
// 语法: string.substring(indexA [, indexB])
"Good news, everyone!".substring(5,9); 
// 'news'
// substr
// 语法: string.substr(start [, length])
"Good news, everyone!".substr(5,4); 
// 'news'

这三个方法均接受一个起始索引参数 start，以及一个可选的结束索引（对于 slice 和 substring）或长度参数（对于 substr）。

Substr方法详解与兼容性陷阱

尽管功能相似，但它们在关键行为上存在显著差异： 1. substr() 方法从指定位置开始，提取指定数量的字符。 参数说明：start 为开始提取字符的位置索引，length 为要提取的字符数量。 返回值：返回一个新字符串，包含从 start 开始的 length 个字符。 兼容性注意：不同浏览器对 substr 的处理存在不一致。现代浏览器允许 start 为负数，表示从字符串末尾向前计数；但在 IE8 及更低版本中，start 最小值为 0，负数会被视为 0。【注：substr 属于 ECMAScript 的非标准扩展特性，官方不建议使用，尤其避免使用负数索引】

var str = "abcdefghij";
console.log("(1): " + str.substr(1)); // (1): bcdefghij
console.log("(1,2): " + str.substr(1,2)); // (1,2): bc
console.log("(-3): " + str.substr(-3)); // (-3): hij
console.log("(-3,2): " + str.substr(-3,2)); // (-3,2): hi
console.log("(20, 2): " + str.substr(20,2)); // (20, 2):
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
 
// ie8及以下版本表现
console.log("(-3): " + str.substr(-2)); // (-20, 2): hij
console.log("(-3, 2): " + str.substr(-2)); // (-20, 2): ab

Substring方法的参数交换特性

2. substring() 方法用于提取字符串中两个指定索引之间的子串，或直到字符串末尾。

参数说明：indexA 和 indexB 均为整数，取值范围在 0 到字符串长度之间。

返回值：返回一个新字符串，包含从较小索引到较大索引之间的字符（包含较小索引处的字符，不包含较大索引处的字符）。

substring 的参数具有可交换性：它总是将较小的参数作为起始位置，较大的参数作为结束位置。如果任一参数小于 0 或为 NaN，则将其视为 0；如果参数大于字符串长度，则将其视为字符串长度。

// assumes a print function is defined
var anyString = "Mozilla";
// Displays "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
// Displays "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));
// Displays "Mozill"
console.log(anyString.substring(0,6));
// Displays "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));

Slice方法的负数索引处理

3. slice 方法用于提取字符串的一部分。 参数说明：beginSlice 为开始提取字符的位置索引，可为负数。若为负数，则计算方式为 (sourceLength - beginSlice)，即从字符串尾部开始计数。endSlice 为结束提取的位置索引，若省略则提取至末尾；若为负数，计算方式为 (sourceLength - endSlice)。 返回值：返回一个新字符串，包含从 start（含）到 end（不含）的所有字符。 注意：两个参数均可使用负数，负数表示从字符串尾部开始计算位置。

var str1 = "The morning is upon us.";
console.log(str1.slice(4, -2)); // morning is upon u
var str = "The morning is upon us.";
str.slice(-3); // "us."
str.slice(-3, -1); // "us"
str.slice(0, -1); // "The morning is upon us"