JS字符串截取函数slice(),substring(),substr()的区别
JS 函数 字符串 区别 截取 substr substring Slice
2023-06-13 09:12:12 时间
大家好,又见面了,我是你们的朋友全栈君。
JS字符串截取函数slice(),substring(),substr()的区别
警告:
尽管 String.prototype.substr(…) 没有严格被废弃 (as in “removed from the Web standards”), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非JavaScript核心语言的一部分,未来将可能会被移除掉。如果可以的话,使用 substring() 替代它.
在JS中,slice()、substring()、substr()都有截取字符串的作用,那他们有哪些用法上的区别呢?如果你也有疑惑,这篇文章或许能够帮助到你。
另外,这三个方法切片后都不会影响原来的字符串,而且都有返回值
重要事项: 与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。
一、substring()
substring()
方法返回一个索引和另一个索引之间的字符串,语法如下:
str.substring(indexStart, \[indexEnd\])
下面有六点需要注意:
- substring()从提取的字符indexStart可达但不包括 indexEnd
- 如果indexStart 等于indexEnd,substring()返回一个空字符串。
- 如果indexEnd省略,则将substring()字符提取到字符串的末尾。
- 如果任一参数小于0或是NaN,它被视为为0。
- 如果任何一个参数都大于stringName.length,则被视为是stringName.length。
- 如果indexStart大于indexEnd,那么效果substring()就好像这两个论点被交换了一样; 例如,str.substring(1, 0) == str.substring(0, 1)
以下是一些示例代码:
var str = 'abcdefghij';
console.log('(1, 2): ' + str.substring(1, 2)); // '(1, 2): b'
console.log('(1, 1): ' + str.substring(1, 1)); // '(1, 1): '
console.log('(-3, 2): ' + str.substring(-3, 2)); // '(-3, 2): ab'
console.log('(-3): ' + str.substring(-3)); // '(-3): abcdefghij'
console.log('(1): ' + str.substring(1)); // '(1): bcdefghij'
console.log('(-20, 2): ' + str.substring(-20, 2)); // '(-20, 2): ab'
console.log('(2, 20): ' + str.substring(2, 20)); // '(2, 20): cdefghij'
console.log('(20, 2): ' + str.substring(20, 2)); // '(20, 2): cdefghij'
二、substr()
substr()
方法返回从指定位置开始的字符串中指定字符数的字符,语法如下:
str.substr(start, \[length\])
下面有四点需要注意:
substr()
会从start
获取长度为length
字符(如果截取到字符串的末尾,则会停止截取)。- 如果
start
是正的并且大于或等于字符串的长度,则substr()
返回一个空字符串。 - 若
start
为负数,则将该值加上字符串长度后再进行计算(如果加上字符串的长度后还是负数,则从0开始截取)。 - 如果
length
为0或为负数,substr()
返回一个空字符串。如果length
省略,则将substr()
字符提取到字符串的末尾。
以下是一些示例代码:
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): '
需要注意的是,Microsoft的JScript不支持起始索引的负值。如果要使用此功能,可以使用以下兼容性代码来解决此错误:
// only run when the substr() function is broken
if ('ab'.substr(-1) != 'b') {
/** * Get the substring of a string * @param {integer} start where to start the substring * @param {integer} length how many characters to return * @return {string} */
String.prototype.substr = function(substr) {
return function(start, length) {
// call the original method
return substr.call(this,
// did we get a negative start, calculate how much it is from the beginning of the string
// adjust the start parameter for negative value
start < 0 ? this.length + start : start,
length)
}
}(String.prototype.substr);
}
三、substring()与substr()的主要区别
substring()
方法的参数表示起始和结束索引,substr()
方法的参数表示起始索引和要包含在生成的字符串中的字符的长度,示例如下:
var text = 'Mozilla';
console.log(text.substring(2,5)); // => "zil"
console.log(text.substr(2,3)); // => "zil"
四、slice()
slice()
方法返回一个索引和另一个索引之间的字符串,语法如下:
str.slice(beginIndex\[, endIndex\])
下面有三点需要注意:
- 若
beginIndex
为负数,则将该值加上字符串长度后再进行计算(如果加上字符串的长度后还是负数,则从0开始截取)。 - 如果
beginIndex
大于或等于字符串的长度,则slice()
返回一个空字符串。 - 如果
endIndex
省略,则将slice()
字符提取到字符串的末尾。如果为负,它被视为strLength + endIndex
其中strLength
是字符串的长度。
以下是一些示例代码:
var str = 'abcdefghij';
console.log('(1, 2): ' + str.slice(1, 2)); // '(1, 2): b'
console.log('(-3, 2): ' + str.slice(-3, 2)); // '(-3, 2): '
console.log('(-3, 9): ' + str.slice(-3, 9)); // '(-3, 9): hi'
console.log('(-3): ' + str.slice(-3)); // '(-3): hij'
console.log('(-3,-1): ' + str.slice(-3,-1)); // '(-3,-1): hi'
console.log('(0,-1): ' + str.slice(0,-1)); // '(0,-1): abcdefghi'
console.log('(1): ' + str.slice(1)); // '(1): bcdefghij'
console.log('(-20, 2): ' + str.slice(-20, 2)); // '(-20, 2): ab'
console.log('(20): ' + str.slice(20)); // '(20): '
console.log('(20, 2): ' + str.slice(20, 2)); // '(20, 2): '
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/136880.html原文链接:https://javaforall.cn
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- js匿名函数和立即执行函数[通俗易懂]
- js用户注册表单验证_onclick调用js函数
- 【说站】js箭头函数是什么
- Js生成二维码_js在线生成二维码
- js中的匿名函数_js匿名函数怎么定义
- JS小技巧,如何使用内置函数对数组内容进行排序
- 云开发新增支持 Node.js 14.18、16.13 云函数
- APlayer Typecho插件兼容instantclick.js
- JS map()方法:对数组的每个元素调用指定的回调函数
- JS生成随机数(random()函数)
- javascript(js)join函数使用方法介绍
- js发个判断字符串是否为符合标准的函数
- JS文字符串转换unicode编码函数
- js字符串操作函数
- js中eval()函数和trim()去掉字符串左右空格应用
- js函数获取html中className所在的内容并去除标签
- 原生JS实现加入收藏夹的代码
- 用js设置下拉框为只读的小技巧
- JavaScript学习笔记之JS对象