JS 字符串常用操作

简介: JS 字符串常用操作

一、使用 substring() 和 slice() 方法提取子字符串

1. slice()

功能:可提取字符串的某个部分,并以新的字符串返回被提取的部分;

语法:array.slice(start, end)

start: 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。

如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,

slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。

end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。

如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。

如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。

slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,就是只有倒数第二个元素)。

var str = "123,456,789";
console.log(str.slice(2,6)); // 3,45
console.log(str.slice(-6,-2)); // 56,7
console.log(str.slice(2)); // 3,456,789
console.log(str.slice(-6)); // 56,789

2. substring()

功能:用于提取字符串中介于两个指定下标之间的字符;

语法:string.substring(from, to)

from:必需。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。

to: 可选。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多1。

如果省略该参数,那么返回的子串会一直到字符串的结尾。

substring() 方法返回的子串包括 开始处的字符,但不包括 结束处的字符。

注意:如果 start 比 end 大,那么该方法在提取子串之前会先交换这两个参数。

如果 start 或 end 为负数,那么它将被替换为 0。

如果 start 与 end 相等,那么该方0法返回的就是一个空串。

var str = "123,456,789";
console.log(str.substring(2,6)); // 3,45
console.log(str.substring(2)); // 3,456,789
console.log(str.substring(6,2)); // 3,45
console.log(str.substring(-6,-2)); //  
console.log(str.substring(6,6)); // 

3. substr()

功能:可在字符串中抽取从开始下标开始的指定数目的字符;

语法:string.substr(start,length)

start:必需。要抽取的子串的起始下标,必须是数值。

如果是负数,那么该参数声明从字符串的尾部开始算起的位置。

也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。

length:可选。子串中的字符数,必须是数值。

如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。

注意: substr() 方法不会改变源字符串。

var str = "123,456,789";
console.log(str.substr(2,6)); // 3,456,
console.log(str.substr(0)); // 123,456,789
console.log(str.substr(-2)); // 89 

二、使用 split() 方法将字符串按照某个字符分割成数组

1. split()

功能:把一个字符串分割成字符串数组;

语法:string.split(separator,limit)

separator:可选。字符串或正则表达式,从该参数指定的地方分割 string Object。

如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

limit: 可选。该参数可指定返回的数组的最大长度。

如果设置了该参数,返回的子串不会多于这个参数指定的数组。

如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

注意: split() 方法不改变原始字符串。

var str = "123,456,789";
console.log(str.split('')); // ["1", "2", "3", ",", "4", "5", "6", ",", "7", "8", "9"]
console.log(str.split(',')); // ["123", "456", "789"]

三、使用 replace() 方法替换字符串中的某个字符或子串

1. replace()

  • 功能:eplace() 方法在字符串中搜索值或正则表达式,并返回已替换值的新字符串。
  • 语法:string.replace(regexp, replacement)
  • 源码
<script>
  let text = document.getElementById("demo").innerHTML; 
  let result = text.replace(/blue/gi, "red"); // Mr red has a red house and a red car.
  let text = "Mr Blue has a blue house and a blue car";
  let result = text.replace(/blue|house|car/gi, function (x) {
    return x.toUpperCase(); // Mr BLUE has a BLUE HOUSE and a BLUE CAR.
  });
</script>

四、使用 indexOf() 和 lastIndexOf() 方法查找子字符串的位置

1. indexOf()

功能:给定一个参数:要搜索的子字符串,搜索整个调用字符串,并返回指定子字符串第一次出现的索引。给定第二个参数:一个数字,该方法将返回指定子字符串在大于或等于指定数字的索引处的第一次出现。

语法:indexOf(searchString, position)

searchString:必选,要搜索的子字符串。

position:可选,子字符串在大于或等于 position 位置的第一次出现的索引,默认为 0

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const searchTerm = 'dog';
const indexOfFirst = paragraph.indexOf(searchTerm);
console.log(`The index of the first "${searchTerm}" from the beginning is ${indexOfFirst}`);
// Expected output: "The index of the first "dog" from the beginning is 40"
console.log(`The index of the 2nd "${searchTerm}" is ${paragraph.indexOf(searchTerm, (indexOfFirst + 1))}`);
// Expected output: "The index of the 2nd "dog" is 52"

2. lastIndexOf()

功能:给定一个参数:要搜索的子字符串,搜索整个调用字符串,并返回指定子字符串第一次出现的索引。给定第二个参数:一个数字,该方法将返回指定子字符串在大于或等于指定数字的索引处的第一次出现。

语法:str.lastIndexOf(searchValue[, fromIndex])

searchValue:一个字符串,表示被查找的值。如果searchValue是空字符串,则返回fromIndex。

fromIndex:待匹配字符串 searchValue 的开头一位字符从 str 的第 fromIndex 位开始向左回向查找。

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const searchTerm = 'dog';
const indexOfFirst = paragraph.indexOf(searchTerm);
console.log(`The index of the first "${searchTerm}" from the beginning is ${indexOfFirst}`);
// Expected output: "The index of the first "dog" from the beginning is 40"
console.log(`The index of the 2nd "${searchTerm}" is ${paragraph.indexOf(searchTerm, (indexOfFirst + 1))}`);
// Expected output: "The index of the 2nd "dog" is 52"
相关文章
|
5月前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
91 1
|
7月前
|
存储 JavaScript 前端开发
JS上传文件(base64字符串和二进制文件流)
这篇文章介绍了两种JavaScript文件上传的方法:使用FileReader对象将文件读取为base64字符串上传,以及使用FormData对象以二进制文件流的形式上传文件,包括如何处理文件选择、读取和上传的详细代码示例。
677 2
JS上传文件(base64字符串和二进制文件流)
|
6月前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
132 5
|
4月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
130 63
|
2月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
69 13
|
4月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
50 2
|
5月前
|
存储 JavaScript 前端开发
JavaScript 字符串(String) 对象
JavaScript 字符串(String) 对象
67 3
|
6月前
|
JavaScript 前端开发
javascript创建字符串
javascript创建字符串
|
6月前
|
JavaScript 前端开发
如何在JavaScript中替换字符串:一篇详细指南
如何在JavaScript中替换字符串:一篇详细指南
|
7月前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作,包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
JS算法必备之String常用操作方法

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等