前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >整理一下JavaScript字符串的截取以及数组的截取

整理一下JavaScript字符串的截取以及数组的截取

作者头像
裴大头
发布2022-01-17 13:53:19
2.2K0
发布2022-01-17 13:53:19
举报
文章被收录于专栏:裴大头的专栏裴大头的专栏

在编写前端时,截取字符串或者是截取数组的部分元素都是频繁出现的场景,所以在这整理一下

width: 600px; margin: 2rem
width: 600px; margin: 2rem

一、截取字符串

JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数:

代码语言:javascript
复制
let str = '我是大头大头下雨不愁';
复制

1、slice()

  • 使用一个参数
代码语言:javascript
复制
console.log(str.slice(2))
// 打印(从第2位开始截取)
// 大头大头下雨不愁
复制
  • 使用两个参数
代码语言:javascript
复制
console.log(str.slice(2, 4))
// 打印(从第2位开始截取,截取到第4位)
// 大头

console.log(str.slice(4, 2))
console.log(str.slice(-2, -4))
// 打印(当第一个参数大于第二个参数时,截取不到任何内容)
// 

console.log(str.slice(2, -2))
// 打印(当第二个参数时,为负数时相当于是负数加上整个字符串的长度,即str.slice(2, -2 + str.length))
// 大头大头下雨

console.log(str.slice(-4, -2))
// 打印(当两个参数都为负数时,负数就是倒着数,例如-4, -2就是从倒数第4个截取到倒数第2个)
// 下雨
复制

2、substring()

使用一个参数和两个正常参数时与slice()一样 当第二个参数是负数时会自动转为0, substring()两个参数无论谁大谁小都是从小的参数开始截取,截取到大的参数。

3、substr()

substr()的两个参数: 第一个参数是起始位置,为正数时正着数,为负数时倒着数。 第二个参数是截取的位数,只能为正数。

4、补充两个函数split()和join()

  • split() 方法用于把一个字符串分割成字符串数组。
代码语言:javascript
复制
let str = '大头大头,下雨不愁';
console.log(str.split(','))

// 打印
// (2) ["大头大头", "下雨不愁"]
复制
  • join() 方法用于把数组中的所有元素放入一个字符串。 元素是通过指定的分隔符进行分隔的。
代码语言:javascript
复制
let arr = ['我是', '大头大头', '下雨不愁']
console.log(arr.join('-'))

// 打印
// 我是-大头大头-下雨不愁
复制

二、截取数组

1、splice()

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目(该方法会改变原始数组)。 首先splice()的第一个参数是起始位置,为正数时正着数,为负数时倒着数。 第二个参数是截取的位数,只能为正数。 第三个以后包括第三个参数是添加到数组的元素(当第二个参数为0是相当于往数组的第一个参数位置添加元素,当第二个参数为正整数时,相当于第三个以后包括第三个参数的元素替换掉第一个参数开始往后数“第二个参数”个元素)。 其次splice的返回值是截取到的内容,如果第二个参数不为正数,则无返回值。

代码语言:javascript
复制
let arr = ['我是', '大头大头', '下雨不愁'];

// 删除
console.log(arr.splice(1, 1))
console.log(arr)

// 打印
// ["大头大头"]
// (2) ["我是", "下雨不愁"]

// 替换
console.log(arr.splice(1, 1, '大头'))
console.log(arr)

// 打印
// ["大头大头"]
// (3) ["我是", "大头", "下雨不愁"]

// 添加
console.log(arr.splice(1, 0, '大头'))
console.log(arr)

// 打印
// []
// (4) ["我是", "大头", "大头大头", "下雨不愁"]
复制

2、slice()

slice() 方法可从已有的数组中返回选定的元素(该方法不改变原始数组)。 第一个参数开始位置。 第二个参数结束位置。 返回截取内容

代码语言:javascript
复制
let arr = ['我是', '大头大头', '下雨不愁'];

console.log(arr.slice(1, 2))
console.log(arr)

// 打印
// ["大头大头"]
// (3) ["我是", "大头大头", "下雨不愁"]
复制

补充

补充一点替换字符串中的特定字符 例如:将一段文字中的张三换成李四 这时候可以使用String对象的replace()结合正则表达式

代码语言:javascript
复制
let str = '我是张三,我的笔记本的名称是"张三的电脑"';

console.log(str.replace(new RegExp("张三","g"), '李四'))
console.log(str)

// 打印(不改变原字符串)
// 我是李四,我的笔记本的名称是"李四的电脑"
// 我是张三,我的笔记本的名称是"张三的电脑"
复制
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、截取字符串
    • 1、slice()
      • 2、substring()
        • 3、substr()
          • 4、补充两个函数split()和join()
          • 二、截取数组
            • 1、splice()
              • 2、slice()
              • 补充
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档