JavaScript字符串“三剑客”

简介: JavaScript字符串方法有很多,其中有三个方法与字符串裁剪有关,他们分别是slice()、substring()和substr(),我把他们统称为“三剑客”。

JavaScript字符串方法有很多,其中有三个方法与字符串裁剪有关,他们分别是slice()、substring()和substr(),我把他们统称为“三剑客”。

由于他们都是用于裁剪字符串,很容易混淆,所以接下来我将结合具体实例来讲讲他们的共同点和区别。

一、共同点

① 接受一个或两个参数,其中第一个参数为裁剪的开始位置
② 都会返回被裁剪下来的子字符串,而原字符串不受影响
③ 若不传第二个参数,则从开始位置(第一个参数)一直截取到字符串结尾。

var str = '微信公众号:前端微站';
var str1 = str.slice(2);  
console.log(str1);    // "公众号:前端微站"
str1 = str.substring(2);
console.log(str1);   // "公众号:前端微站"
str1 = str.substr(2);
console.log(str1);   // "公众号:前端微站"
console.log(str);   // "微信公众号:前端微站"

可以看出,当只传入一个参数时,这三个方法的用法和作用都是一致的,都是将“公”字(索引值为2)一直到字符串末尾的字符串裁剪下来并返回,并且都不会影响到原字符串。

二、区别

① slice()和substring()的第二个参数均表示的是裁剪的结束位置(但不包括该项,这与数组中的slice()方法类似),而substr()的第二个参数则表示的是裁剪下来字符串长度
② 当传入的参数为负值时,slice()会将所有负参数与字符串的长度相加,substring()会把所有负参数都转换为0,而substr()就相对比较复杂了,它会将第一个负参数加上字符串长度,第二个参数转换为0

1. 参数均为正数

var str = '微信公众号:前端微站';
var str1 = str.slice(2,5);
console.log(str1);    // "公众号"
str1 = str.substring(2,5);
console.log(str1);    // "公众号"
str1 = str.substr(2,3);
console.log(str1);    // "公众号"

很明显,slice()和substring()用法一致,两个参数分别都表示的是起始位置2结束位置5,不包含结束位置5所在字符(“:”),而substr()第二个参数表示的是要裁剪下来的字符串长度,实例中是裁剪3个字符。

2. 参数存在负数

var str = '微信公众号:前端微站';
console.log(str.length);   // 10
var str1 = str.slice(-4);   //  相当于str.slice(6)
console.log(str1);   //  "前端微站"
str1 = str.substring(-4);   //  相当于str.substring(0)
console.log(str1);   //  "微信公众号:前端微站"
str1 = str.substr(-4);   //  相当于str.substr(6)
console.log(str1);   //  "前端微站"

var str2 = str.slice(2,-4);   //  相当于str.slice(2,6)
console.log(str2);   //  "公众号:"
str2 = str.substring(2,-4);   //  相当于str.substring(2,0),也就是str.substring(0,2)
console.log(str2);   //  "微信"
str2 = str.substr(2,-4);   //  相当于str.substr(2,0)
console.log(str2);   //  ""

var str3 = str.slice(-2,-4);   //  相当于str.slice(8,6)
console.log(str3);    // ""
str3 = str.substring(-2,-4);   //  相当于str.substring(0,0)
console.log(str3);   // ""
str3 = str.substr(-2,-4);   //  相当于str.substr(8,0)
console.log(str3);   // ""

var str4 = str.slice(-4,-2);   //  相当于str.slice(6,8)
console.log(str4);   // "前端"
str4 = str.substring(-4,-2);  //  相当于str.substring(0,0)
console.log(str4);  // ""
str4 = str.substr(-4,-2);  //  相当于str.substr(6,0)
console.log(str4);  // ""

当参数为负数时,只需牢记,slice见负加总长,substring见负则归零,substr一加总长一归零。 另外还需要特别注意的一点是,slice()第一个参数须小于第二个参数才能正常截取字符串,否则返回的是空字符串,而substring()则没有这个问题。

本文重点总结:

① substr()第二个参数是裁剪长度,只要为负,裁剪结果必定是空字符串
② 不管如何裁剪,均不影响原字符串
③ 当参数为负,slice加总长,substring则归零,substr一加总长一归零。

相关文章
|
24天前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
44 1
|
3月前
|
存储 JavaScript 前端开发
JS上传文件(base64字符串和二进制文件流)
这篇文章介绍了两种JavaScript文件上传的方法:使用FileReader对象将文件读取为base64字符串上传,以及使用FormData对象以二进制文件流的形式上传文件,包括如何处理文件选择、读取和上传的详细代码示例。
330 2
JS上传文件(base64字符串和二进制文件流)
|
2月前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
59 5
|
3月前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
1月前
|
存储 JavaScript 前端开发
JavaScript 字符串(String) 对象
JavaScript 字符串(String) 对象
38 3
|
2月前
|
JavaScript 前端开发
javascript创建字符串
javascript创建字符串
|
2月前
|
JavaScript 前端开发
如何在JavaScript中替换字符串:一篇详细指南
如何在JavaScript中替换字符串:一篇详细指南
|
2月前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法
42 2
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript 模板字符串
JavaScript 模板字符串
22 3
|
2月前
|
存储 JavaScript 前端开发
JavaScript 字符串
JavaScript 字符串
20 2