当前位置:首页 > 技术博客 > JavaScript > 整理:JavaScript字符串的截取以及数组的截取

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

4年前 (2021-09-28)JavaScript731

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


一、截取字符串

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

let str = '我是大头大头下雨不愁';

1、slice()

//使用一个参数:

console.log(str.slice(2))

// 打印(从第2位开始截取)
// 大头大头下雨不愁
//使用两个参数:

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() 方法用于把一个字符串分割成字符串数组。

let str = '大头大头,下雨不愁';
console.log(str.split(','))

// 打印
// (2) ["大头大头", "下雨不愁"]
//join() 方法用于把数组中的所有元素放入一个字符串。
//元素是通过指定的分隔符进行分隔的。

let arr = ['我是', '大头大头', '下雨不愁']
console.log(arr.join('-'))

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


二、截取数组

1、splice()

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

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

let arr = ['我是', '大头大头', '下雨不愁'];

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

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


补充:

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

let str = '我是小沫,我的笔记本的名称是"小沫的电脑"';

console.log(str.replace(new RegExp("小沫","g"), '张三'))
console.log(str)

// 打印(不改变原字符串)
// 我是张三,我的笔记本的名称是"张三的电脑"
// 我是小沫,我的笔记本的名称是"小沫的电脑"


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/165.html

标签: JavaScript

相关文章

百度地图JavaScript简单标点连线

百度地图JavaScript简单标点连线

背景最近在研究轨迹数据的挖掘,第一步就是把轨迹数据在地图上可视化出来,然后再进行后续的算法研究。从一开始懵懂知道百度地图有免费的 API 可以调用,到后面知道还...

Bilibili头部景深对焦效果

Bilibili头部景深对焦效果

交互式鼠标悬停头图景深对焦效果<head>       <meta n...

js轮播图滑块过渡特效

js轮播图滑块过渡特效

js flipping插件制作简洁时尚的带缩略图的大图轮播幻灯片展示,点击左右箭头按钮,标题,缩略图,大图滑动切换效果。下载链接: https://pan.ba...

大气磅礴的滑块网页背景

大气磅礴的滑块网页背景

<html>     <head>     <...

JavaScript时间日期的基操

JavaScript时间日期的基操

javascript 时间的基本操作,记录一下方便日后Ctrl C / Ctrl V获取当前月份的总天数:由于JavaScript中day的范围为1~31中的值...

js写时钟实现钟摆效果,js制作动态时钟特效

js写时钟实现钟摆效果,js制作动态时钟特效

这是一款模拟摆钟造型的简洁js时钟效果,画面中的摆钟上方打了一束光,形象逼真。<!doctype html>  &nb...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。