js中常见切割截取字符串的几种方法小结

JS中常见切割截取字符串的几种方法小结

字符串是Web开发中不可或缺的一部分,而JavaScript(简称JS)中提供了许多操作字符串的方法。其中,切割和截取字符串在实际开发中非常常见。本文就来介绍一下JS中常见的切割和截取字符串的几种方法。

slice()

slice(start, end) 方法可以从一个字符串中提取一个子字符串,并返回新的字符串。该方法包含两个参数:起始索引(包括)和结束索引(不包括)。

const str = 'Hello, World!';

// 从第7个索引(包括)开始提取字符串,到第13个索引(不包括)结束截取字符串
const slicedStr = str.slice(7, 13);

console.log(slicedStr); // World

在上面的示例中,从 start 索引 7 开始,提取字符串中索引 7-12 的字符,不包括索引 13 的字符。最终截取到的字符串是 World

需要注意的是,如果未提供第二个参数,则 slice 方法会一直截取到字符串的最后一个字符。

const str = 'Hello, World!';

// 从第7个索引(包括)开始提取字符串,一直截取到字符串结尾
const slicedStr = str.slice(7);

console.log(slicedStr); // World!

substring()

substring(start, end) 方法与 slice() 方法类似,但是 substring() 不允许使用负数作为参数。如果 startend 参数中的任何一个为负数,则 substring() 方法会将其转换为 0。此外,如果 start 大于 end,则该方法会将两个参数交换,以此保证 startend 之前。

const str = 'Hello, World!';

// 从第7个索引(包括)开始提取字符串,到第13个索引(不包括)结束截取字符串
const slicedStr = str.substring(7, 13);

console.log(slicedStr); // World

需要注意的是,在 slice() 方法中可以使用负数作为参数提取字符串,而在 substring() 方法中不行。

substr()

substr(start, length) 方法从一个字符串中提取子字符串,并返回新的字符串。该方法包含两个参数:起始索引(包括)和要提取的字符数。

const str = 'Hello, World!';

// 从第7个索引(包括)开始提取字符串,一共提取 5 个字符
const slicedStr = str.substr(7, 5);

console.log(slicedStr); // World

在上面的示例中,从 start 索引 7 开始,提取字符串中索引 7-11 的字符,共 5 个字符。最终截取到的字符串是 World

需要注意的是,如果未提供第二个参数,则 substr 方法会一直截取到字符串的最后一个字符。

const str = 'Hello, World!';

// 从第7个索引(包括)开始提取字符串,一直截取到字符串结尾
const slicedStr = str.substr(7);

console.log(slicedStr); // World!

split()

split(separator, limit) 方法将一个字符串分割成字串,将字串存储到数组中。该方法包含两个参数:分隔符和可选的截取字符串数量。

const str = 'How are you doing today?';

// 使用空格分隔字符串,最多拆分 3 个子字符串
const splitStr = str.split(' ', 3);

console.log(splitStr); // [ 'How', 'are', 'you' ]

在上面的示例中,split() 方法使用空格作为分隔符,最多将字符串分成 3 个字串。最终存储在数组中的内容是 [ 'How', 'are', 'you' ]

实例应用

通过以上的介绍,不难发现 slice()substring()substr()split() 方法的作用有重叠的部分,但也各有特点。我们可以根据不同场景选择不同的方法。

例如,在开发Web应用过程中,经常需要从URL中获取参数。此时我们可以使用 split() 方法来将URL按照 ? 号和 & 号分隔开,然后再将获取到的参数以 = 号分隔提取出来。

const url = 'https://www.example.com/?name=John&age=30&gender=male';

// 将URL按照 ? 和 & 号分隔开,获取参数对象
const query = url.split(/[?&]/).slice(1).reduce((obj, item) => {
  const [key, value] = item.split('=');
  obj[key] = value;
  return obj;
}, {});

console.log(query); // { name: 'John', age: '30', gender: 'male' }

以上代码将URL按照 ?& 号分隔,并将获取到的参数及其对应值保存为一个对象。最终输出结果为 { name: 'John', age: '30', gender: 'male' }

总结

本文介绍了JS中常见切割和截取字符串的四种方法,它们分别是 slice()substring()substr()split() 方法。在实际开发中,可以根据不同的场景选择不同的方法,从而更好地完成开发任务。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js中常见切割截取字符串的几种方法小结 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • ES6基础之字符串和函数的拓展详解

    很高兴为您介绍“ES6基础之字符串和函数的拓展详解”的完整攻略。 第一部分:字符串的拓展 模板字符串 ES6添加了模板字符串的语法,它使用反引号(`)来定义字符串,并且可以内嵌变量: let name = ‘Lucy’; let age = 18; console.log(`My name is ${name}, and I am ${age} years …

    JavaScript 2023年5月28日
    00
  • jquery validate添加自定义验证规则(验证邮箱 邮政编码)

    以下是关于jquery validate添加自定义验证规则的完整攻略。 什么是jquery validate? jQuery validate是一个基于jQuery的表单验证插件,它可以对表单中的各类数据进行校验,从而帮助我们减少了客户端数据校验的代码量,提高了开发效率。 如何添加自定义验证规则? jquery validate插件提供了丰富的内置验证规则,…

    JavaScript 2023年6月10日
    00
  • document.getElementById获取控件对象为空的解决方法

    当使用 document.getElementById 获取控件对象时,有可能会出现获取为空的情况。解决这种情况的方法有很多,本攻略将介绍几种常见的解决方法。 方法一:确认页面元素存在 在使用 document.getElementById 获取控件对象时,首要要确认该控件元素是否在页面中存在。可以使用浏览器开发者工具查看页面元素结构,确认该控件元素是否存在…

    JavaScript 2023年6月10日
    00
  • 关于JavaScript中var声明变量作用域的推断

    首先,需要了解一些JavaScript中变量作用域的相关知识。 在JavaScript中,变量的作用域有全局作用域和局部作用域两种。 在全局作用域中声明的变量可以被程序中任意位置访问,而在局部作用域中声明的变量仅可以在声明该变量的函数内及函数内部任意嵌套的其他函数内访问。 在ES5之前,JavaScript中只有函数作用域,因此无法使用块级作用域。即使在if…

    JavaScript 2023年6月10日
    00
  • Javascript基础教程之argument 详解

    Javascript基础教程之argument详解 在 JavaScript 中,函数的参数分为两种:形参和实参。形参是函数定义时声明的参数,实参是函数调用时传递给函数的参数。此外,JavaScript 还提供了另一种参数方式 —— argument 对象。argument 对象包含了函数调用时传递进来的所有实参,可以在函数内部直接使用。在本篇教程中,我们将…

    JavaScript 2023年5月27日
    00
  • 详解Js 根据文件夹目录获取Json数据输出demo

    下面是详解 “JS 根据文件夹目录获取 Json 数据输出 demo” 的完整攻略。 1. 概述 本攻略主要讲解如何使用 JS 根据文件夹目录获取 json 数据,最终输出到页面中。具体实现方式是对文件夹目录进行遍历,生成对应的 json 数据,然后输出到页面中。 2. 准备工作 在开始之前,需要准备一些开发环境和依赖: Node.js,用于在后台生成 js…

    JavaScript 2023年5月27日
    00
  • 原生JS 购物车及购物页面的cookie使用方法

    下面是 “原生JS 购物车及购物页面的cookie使用方法”的完整攻略。 什么是 cookie cookie 是存储在客户端(例如浏览器)中的小数据块,包含有关用户行为和偏好的信息,以及与网站相关的其他信息。网站有时需要使用 cookie 跟踪和存储有关用户的信息。 cookie 如何在购物车和购物页面使用 在购物车和购物页面中使用 cookie 有两种方法…

    JavaScript 2023年6月11日
    00
  • js显示当前日期时间和星期几

    JS显示当前日期、时间和星期几的完整攻略如下: 1. 获取当前日期时间: JavaScript中,通过Date对象可以获取当前系统时间,我们可以使用new Date()来获取一个Date实例,然后通过对实例的操作来获取日期时间信息。下面是获取当前日期时间的代码: let now = new Date(); let year = now.getFullYear…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部