javaScript教程之JS常用字符串API汇总梳理

最新推荐文章于 2025-04-03 14:05:03 发布
原创 最新推荐文章于 2025-04-03 14:05:03 发布 · 1.9k 阅读 · 43 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

关于js字符串与js数组的一些说明：

  1. 字符串与数组有一定的相同之处，都可以通过length属性获取大小，都可以通过下标访问，都能用for循环遍历每个字符/元素
  2. 字符串与数组的不同之处，数组可以随意修改原数组，字符串是字符只读数组，一旦创建不可以修改

1.字符串拼接concat()、+、模板字符串

concat()函数:将多个字符串拼接成新字符串，返回新拼接的字符串
语法:var newStr = str.concat(string1,string2,…,stringx)

var str = "dream-";
var str1 = "starts";
var str2 = "-with-lighting-matches";
var newStr1 = str.concat();//没有参数功能等同复制字符串
var newStr2 = str.concat(str1);//将str与str1拼接返回
var newStr3 = str.concat(str1,str2); //将str与str1、str2拼接返回

console.log(newStr1)//dream-
console.log(newStr2);//dream-starts
console.log(newStr3);//dream-starts-with-lighting-matches

通过 + 拼接字符串
用法:var newStr = str + string1 + string2 +… +stringx

var str = "dream-";
var str1 = "starts";
var str2 = "-with-lighting-matches";
var newStr1 = str + str1;//将str与str1拼接
var newStr2 = str + str1 + str2; //将str与str1、str2拼接

console.log(newStr1);//dream-starts
console.log(newStr2);//dream-starts-with-lighting-matches

通过模板字符串拼接字符串ES6新增
用法:var newStr = ${string1}${string2}...${stringx}

//用法:var newStr = `${string1}${string2}...${stringx}`
var str = "dream";
var str1 = "starts";
var str2 = "with-lighting-matches";
var newStr1 = `${str}-${str1}`;//将str与str1拼接
var newStr2 = `${str}-${str1}-${str2}`; //将str与str1、str2拼接

console.log(newStr1);//dream-starts
console.log(newStr2);//dream-starts-with-lighting-matches

2.字符串选取substring()、substr()、slice()

substring()函数:选取两个指定索引之间的字符串,两个参数时遵循含头不含尾的原则，返回新选取的字符串
语法:var newStr = str.substring([starti [,endi]])
注意：substring会以较小参数作为起始位置，较大参数作为结束位置

var str = "dream-starts-with-lighting-matches";
var newStr1 = str.substring();//没有参数代表选取所有字符
var newStr2 = str.substring(5);//一个参数代表开始位置，选取从索引5开始开始到结束字符
var newStr3 = str.substring(5,10); //选取索引5到索引10之间的字符，不包括索引10
//以较小参数作为起始位置，较大参数作为结束位置
var newStr4 = str.substring(10,5); //选取索引5到索引10之间的字符，不包括索引10
console.log(newStr1)//dream-starts-with-lighting-matches
console.log(newStr2);//-starts-with-lighting-matches
console.log(newStr3);//-star
console.log(newStr4);//-star

substr()函数:选取从指定位置开始指定长度的字符串，返回新选取的字符串
语法:var newStr = str.substr([starti [,length]])

var str = "dream-starts-with-lighting-matches";
var newStr1 = str.substr();//没有参数代表选取所有字符
var newStr2 = str.substr(5);//一个参数代表开始位置，选取从索引位置5开始到结束字符
var newStr3 = str.substr(5,8);//从索引位置5开始选取8个字符
console.log(newStr1)//dream-starts-with-lighting-matches
console.log(newStr2);//-starts-with-lighting-matches
console.log(newStr3);//-starts-

slice()函数:选取两个指定索引之间的字符串,两个参数时遵循含头不含尾的原则，返回新选取的字符串
语法:var newStr = str.slice([starti [,endi]])

var str = "dream-starts-with-lighting-matches";
var newStr1 = str.slice();//没有参数代表选取所有字符
var newStr2 = str.slice(5);//一个参数代表开始位置，选取从索引5开始开始到结束字符
var newStr3 = str.slice(5,10); //选取索引5到索引10之间的字符，不包括索引10
console.log(newStr1)//dream-starts-with-lighting-matches
console.log(newStr2);//-starts-with-lighting-matches
console.log(newStr3);//-star

3.字符串查找indexOf()、lastIndexOf()、search()、match()、exec()

indexOf()函数:从头开始往后查找指定值,返回指定值出现的第一个索引，找不到返回-1
语法:var index = str.indexOf(searchvalue [,fromindex])

var str = "Good good good study, day day day up";
var  index1 = str.indexOf('good');
console.log(index1);//5
var  index2 = str.indexOf('good',6);
console.log(index2);//10
var  index3 = str.indexOf('No');
console.log(index3);//-1

lastIndexOf()函数:从字符串后面开始往前查找指定值,返回指定值出现的第一个索引，找不到返回-1
语法:var index = str.lastIndexOf(searchvalue [,fromindex])

var str = "Good good good study, day day day up";
var  index1 = str.lastIndexOf('good');
console.log(index1);//10
var  index2 = str.lastIndexOf('good',6);
console.log(index2);//5
var  index3 = str.lastIndexOf('good',3);
console.log(index3);//-1

search()函数:查找指定值/正则匹配的值在字符串中的位置,返回找到的第一个索引，找不到返回-1
语法:var index = str.search(regexp/searchvalue )

var str = "Good good good study, Day day day up";
var  index1 = str.search('good');
console.log(index1);//5
var  index2 = str.search('No');
console.log(index2);//-1

var  index3 = str.search(/good/);
console.log(index3);//5
var  index3 = str.search(/good/i);//根据正则查找，不区分大小写
console.log(index3);//0

match()函数:查找指定值/正则匹配的元素,返回值根据是否全局匹配(正则中是否有g标识)有所不同,没找到返回 null，具体如下：

  1. 参数为非正则或正则但是不全局匹配，返回一个数组，数组成员如下:
    第0个元素:匹配文本
    index:首次匹配到子字符串的位置
    input:原字符串
    groups:当前并不被支持

  2. 参数为正则全局匹配：返回所有匹的值组成的数组

语法:var arr= str.match(regexp/searchvalue )

var str = "Good good good study";
var  arr1 = str.match('good');
console.log(arr1);//["good", index: 5, input: "Good good good study", groups: undefined]
var  arr2= str.match('No');
console.log(arr2);//null

var  arr3= str.match(/good/);
console.log(arr3);//["good", index: 5, input: "Good good good study", groups: undefined]
var  arr4 = str.match(/good/g);//全局查找，区分大小写
console.log(arr4);//["good", "good"]
var  arr5 = str.match(/good/ig);//全局查找，不区分大小写
console.log(arr5);// ["Good", "good", "good"]
var  arr6 = str.match(/No/ig);//全局查找，不区分大小写
console.log(arr6);// null

exec()函数:查找正则匹配的元素,没找到返回 null, 找到返回新组成的数组，数组成员如下：

  • 第0个元素:匹配文本
  • index:首次匹配到子字符串的位置
  • input:原字符串
  • groups:当前并不被支持

正则是否全局匹配(是否有g标识)调用过程不同 正则对象中的lastIndex属性的值是用来控制检查字符开始的位置，如果是非全局匹配该值为零，若为全局匹配，该值为上一次找到字符串的尾部索引的下一位

语法:var arr = regexp.exec(str)

附:正则定义的两种方式

  1. var regexp = /pattern/modifiers;
  2. var regexp = new RegExp(pattern,modifiers);
  • modifiers(修饰符)说明:
    i:忽略大小写；
    g:全局匹配；
    m:多行匹配，当要检索的字符串为单行时，使用 m无意义
var str = "Good good good study";
var regexp1 = /good/
var  arr1 = regexp1.exec(str);
console.log(arr1);//["good", index: 5, input: "Good good good study", groups: undefined]

//var regexp2 = /good/g
var regexp2 = new RegExp(/good/,"g")
var arr2 = []
do {
  console.log(arr2)
  console.log(regexp2.lastIndex)
} while ((arr2 = regexp2 .exec(str)) != null)  

//do-while会循环输出3次，每次内容如下
//第一次
	//null
	//0
//第二次
	//["good", index: 5, input: "Good good good study", groups: undefined]
	//9
//第三次
	//["good", index: 10, input: "Good good good study", groups: undefined]
	//14

4.字符串替换replace()

replace()函数:将字符串中匹配的内容替换为新内容，返回替换后的字符串
语法:var newStr = str.replace(regexp/substr,replacement)

var str = "Good good good study, day day day up";
var newStr1 = str.replace('good','hard');//普通替换只替换第一个匹配的位置
var newStr2 = str.replace(/good/g,'hard');//利用正则全局查找替换，区分大小写
var newStr3 = str.replace(/good/ig,'hard');//利用正则全局查找替换，不区分大小写
var newStr4 = str.replace(/\s+/g,'');//去除空格

console.log(newStr1)//Good hard good study, day day day up
console.log(newStr2);//Good hard hard study, day day day up
console.log(newStr3);//hard hard hard study, day day day up
console.log(newStr4);//Goodgoodgoodstudy,daydaydayup

5.字符串分割为数组split()

split()函数:根据指定的分隔符将字符串分割为数组，返回分割字符串生成的数组
语法:var newArr = str.split(separator,howmany)

var str1 = "dream-starts-with-lighting-matches";
var newArr1 = str1.split('-');//将字符串根据'-'分割为数组
var newArr2 = str1.split('-', 3);//将字符串根据'-'分割为数组,只取前三个

console.log(newArr1)//["dream", "starts", "with", "lighting", "matches"]
console.log(newArr2);//["dream", "starts", "with"]

//拓展，split通常会和join配套使用
var str1 = "dream-starts-with-lighting-matches";
var newArr3 = str1.split('-');//将字符串根据'-'分割为数组
var str3 = newArr3.join('&')
console.log(newArr1)//["dream", "starts", "with", "lighting", "matches"]
console.log(str3)//dream&starts&with&lighting&matches

6.字符串大小写转换toLowerCase()、toUpperCase()

toLowerCase()函数:将字符串中的字符都转换为小写，返回转换后的字符串
语法:var newStr = str.toLowerCase()
toUpperCase()函数:将字符串中的字符都转换为大写，返回转换后的字符串
语法:var newStr = str.toUpperCase()

var str = "Good good study, Day day up";
var newStr1 = str.toLowerCase();
var newStr2 = str.toUpperCase();

console.log(newStr1)//good good study, day day up
console.log(newStr2);//GOOD GOOD STUDY, DAY DAY UP

7.获取指定位置的字符charAt()、字符编码值charCodeAt()

charAt()函数:获取字符串中指定位置/索引的字符，返回获取的字符
语法:var newChar = str.charAt(index)

charCodeAt()函数:获取字符串中指定位置/索引的字符编码，返回获取的字符编码
语法:var newCharCode = str.charCodeAt(index)

var str = "Good good study, Day day up";
var char1 = str.charAt(0);
var char2 = str.charAt(5);
var charCode1 = str.charCodeAt(0);
var charCode2 = str.charCodeAt(5);
console.log(char1)//G
console.log(char2);//g
console.log(charCode1);//71 字符G的ASCII码
console.log(charCode2);//103 字符g的ASCII码
JS操作字符串的一些常用API简介
weixin_43946828的博客
03-27 1170
JS操作字符串的一些常用API简介
前端面试专栏-算法篇：19.数组与字符串操作技巧
最新发布
爱分享的程序员
07-06 1252
本文系统梳理了前端开发中数组与字符串的核心操作技巧。在数组方面，详细解析了四种创建方式（字面量、构造函数、Array.from和Array.of）的适用场景与差异，以及元素增删方法（push/unshift/pop/shift）的性能特点和使用场景。字符串操作部分重点介绍了模板字符串、常用方法（slice/substring/substr）的对比，以及正则表达式的高阶应用。文章通过大量代码示例，帮助开发者掌握数据处理的规范写法与性能优化技巧，提升开发效率和代码质量。
JavaScript字符串常用api
qq_43667836的博客
09-10 579
1. str.slice(start [,end]) 和 str.substring(start [,end]) 截取。 slice() 和 substring() 用法类似，只是slice支持负数，而substring的负数会被转换成0，然后截取0和start之间字符。 如果 substring() 的 start 比 end 大，这个方法将先交换两个参数的值，然后返回它们之间的子串。 2. str.split(delimiter [,limit]) 把字符串以分割符为界点分割成数组。 d..
javascript中字符串操作常用的API
i_bilibili的博客
09-12 304
Python split()方法 Python split() 通过指定分隔符对字符串进行切片，如果参数 num 有指定值，则分隔 num+1 个子字符串 https://www.runoob.com/python/att-string-split.html JavaScript replace() 方法 replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 https://www.runoob.com/jsref/jsref-replace.html Ja
JS操作字符串的常用API
庸人方自扰，自在就好
01-27 1157
目录+运算符concat().length[]indexOf()search()toLowerCase()、toUpperCase()replace()substring()split()lastIndexOf()JavaScript中通过“+”来连接两个字符串，如果两个变量为数字，则是进行相加运算，如果是字符串，则是将两个变量连接起来。 concat() JavaScript中通过concat()方法实现两个字符串的连接，此方法与使用“+”方法实现的效果相同。 .length JavaScri
前端开发常用JavaScript与jQuery API汇总
综上所述，该资源“js,jq等前端全部api”应是一份全面梳理 JavaScript 与 jQuery 核心 API 的实用手册，覆盖从基础语法到高级应用的各个层面，特别适合正在学习前端开发的技术人员作为参考工具。它不仅有助于理解...
JavaScript常用字符串方法详解与实战示例
本文标题《JS字符串方法汇总[项目代码]》所指向的内容正是对JavaScript中所有常用及新增字符串方法的一次系统性梳理与实践总结，具有极高的学习与参考价值。 首先，从“去除空格”这一基础但高频的操作开始，...
JavaScript从入门到精通完整教程合集
JavaScript作为当前Web开发领域中最为重要的脚本语言之一，其应用范围覆盖了前端开发、后端开发（如Node.js）、移动端开发（React Native）、桌面应用开发（Electron）等多个层面。根据所提供的文件信息——...
JavaScript常用技巧与代码集锦
综上所述，《常用JavaScript大集成》不仅仅是一份简单的代码合集，更是对JavaScript语言核心能力的一次系统梳理与实战提炼，适合各类前端开发者作为案头常备参考资料，持续查阅与学习，从而不断提升编码水平与工程化...
JS 字符串 常用API汇总+注意事项整理
yavlgloss的博客
04-03 942
JS 字符串
JavaScript中字符串的常见api操作（偏ES5）
weixin_34129145的博客
05-31 307
1. api简单汇总 1.1 string相关操作汇总 获取字符串长度 str.length 分割字符串 str.split() 拼接字符串 str1+str2 或 str1.concat(str2) 替换字符串 str.replace("玩游戏","好好学习") 提取子字符串 str.slice(start, end)或str.substring(start,end)或myStr.substr(...
JavaScript字符串 API
Gaokaifeng的博客
05-16 270
JavaScript字符串API： //length 长度 let str='abcde'; let str1="小高"; console.log(str.length); //5 consloe.log(str1.length); //2 // indexof():找到索引 let str='hello world'; console.log(str.indexof('w')); //6 console.log(str.indexof('l')); //2 console.log(str.
JS 字符串方法 API
Jerry子辰的博客
03-17 355
字符串string： var str = ‘hello everybody,Look at me’ // length str.length 返回字符串长度，空格也算在内 /* indexOf(),lastIndexOf() 一个从开头往后找，一个从最后往前找 两个都是从字符串里查找指定字符串所在位置下标，返回下标值，若未找到都返回-1 str.indexOf(‘llo’) — 2 str.lastIndexOf(‘llo’) — 2 str.indexOf(‘look’) — -1 区分大小写 str
JS字符串对象的API大全
weixin_44003190的博客
12-17 356
1.toUpperCase()——将字符串英文字母转化成大写。用法： str.toUpperCase(); 2.toLowerCase()——将字符串英文字母转化成小写。用法： str.toLowerCase(); 3.length——获取字符串的长度。用法： str.length;//注意不要写成str.length() 4.charAt()——获取字符串指定下标的值，返回的是对应下标的字...
js字符串详解（二）：字符串API
qq_37899792的博客
06-14 1924
所有字符串API都无权修改原字符串，只能返回新字符串！ 转换 1.大小写转换: 将字符串中所有英文字母转为统一的大小写 何时: 只要不区分大小写时，都要先转为一致的大小写，再判断。 比如: 用户名，邮箱地址，验证码 如何: str.toUpperCase() //都转大写 str.toLowerCase() //都转小写 2.得...
js 字符串常用api()
rgpbrave的博客
05-28 684
js 字符串常用api ！！！所有字符串的方法都会返回新字符串。它们不会修改原始字符串。 ！！！所有字符串的方法都会返回新字符串。它们不会修改原始字符串。 ！！！所有字符串的方法都会返回新字符串。它们不会修改原始字符串。 查找字符串 一、 length： 返回字符串的长度 var str = "abcdef" var strLen = str.length // 6 二、 indexOf( )： 返回字符串中指定文本首次出现的索引（位置 ***如果未找到返回 -1（可以利用这个做js判断）
JS中常用字符串API - 使用汇总
铁锤妹妹的博客
05-16 900
JavaScript 中有很多字符串（String）API 可以用来操作和处理字符串，下面列举一些常用的：
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值