JS操作字符串常见方法

news2024/10/6 10:30:24

目录

一:前言

二:常见的内置方法

1、charAt与charCodeAt

2、indexOf与lastIndexOf

3、substring与substr

4、toLowerCase 和 toUpperCase

5、slice

6、replace

7、split

8、concat

9、trim

10、trimStart / trimLeft

11、trimEnd / trimRight

12、search()

三:结尾


一:前言

        在前端项目开发中,我们经常会涉及到处理字符串的各种操作。但是不必担心,JavaScript是很贴心的,给了我们很多内置的方法。这让我们的开发成本大大降低,不必去考虑其内部的实现方法(最好还是有所了解)。拿来会用即可。接下来就让我们开始分析一些比较常用的方法吧!

        注意:字符串和数组一样,按照索引来排列。并且所有字符串常用方法, 都不会改变原始字符串, 都是以返回值的形式出现结果 。

二:常见的内置方法

// 转换为字符串
// 方法1
var num=110;
var n=num.toString();    //"110"

// 方法2
var num=111;
var n=String(num);       //"111"

// 方法3
var num=112;
var n="" + num;          //"112"

1、charAt与charCodeAt

1) charAt

●作用:charAt() 是找到字符串中指定索引位置的内容返回

●语法:字符串.charAt(索引)

●返回值:该索引位置对应的字符

○如果有该索引位置, 那么就是该索引位置的字符

○如果没有该索引位置, 那么就是 空字符串('')

var str = 'hello world'
//使用charAt找到字符串中的某一个内容
var index = str.charAt(2)
console.log(index)// l
//查找索引为13的内容,因为没有返回是一共空字符串var index1 = str.charAt(13)
console.log(index1);// ''

2) charCodeAt

●作用:charCodeAt() 就是返回对应索引位置的 unicode 编码

●语法:字符串.charCodeAt(索引)

●返回值:该索引位置的对应字符的 编码(十进制)

var str = ' hello world'
1/使用charAt找到字符串中的某一个内容var index = str.charCodeAt(4)
console.log(index)// 111
// 因为0在 unicode 对照表里面存储的是 111,所以就会返回111

2、indexOf与lastIndexOf

1) indexOf

●作用:indexOf 就是按照字符找到对应的索引

●语法:字符串.indexOf(要查找的字符,开始索引)

●返回值:

○如果有该字符内容, 那么就是该字符的索引位置

○如果没有该字符内容, 就是 -1

var str =  'hello world'
//使用indexOf 找到字符串中的某一个内容
var index = str.indexOf('l',0)
console.log(index)// 2返回第一个找到的内容的下标后面的就不查找了
var index1 = str.indexof('w',3)
console.log(index1);116不管从那个索引开始,索引的位置不变
var index2 = str.indexOf('w',7)
console.log(index2);// -1从索引7开始查找没有找到返回-1

2) lastIndexOf

●作用:lastIndexOf 是从后向前检测该字符在字符串内的索引位置

●语法:字符串.indexOf(要查找的字符,开始索引)

●返回值:

○如果有该字符内容, 那么就是该字符的索引位置

○如果没有该字符内容, 就是 -1

var str = 'hello world'
//使用lastIndexOf找到字符串中的某一个内容
var index = str.lastIndexOf('l')
console.log(index)//9返回第一个找到的内容的下标后面的就不查找了,索引的位置不变
var index = str.lastIndexOf('l',8)
console.log(index)//3 返回第一个找到的内容的下标后面的就不查找了,索引的位置不变
var index = str.lastIndexof('w',5)
console.log(index)//-1 从后开始查找,开始的索引是5但是前面没有找到w返回-1

3、substring与substr

1) substring

●作用:substring 是用来截取字符串使用的

●语法: substring(从哪个索引开始,到哪个索引截止),包含开始索引,不包含结束索引

●返回值:返回截取到的内容

var str = 'hello world'
//使用substring截取字符串中的某一个内容
var res = str. substring(2,8)
console.log(res); //llo wo

2) substr

●作用:substr 也是用来截取字符串的

●语法:substr(从哪个索引开始,截取多少个)

●返回值:截取到的内容

var str = 'hello world'
//使用substr截取字符串中的某一个内容
var res = str.substr(2,7)//从索引2开始,截取7个
console.log(res);//llo wor

○这个方法和 substring 不一样的是,第二个参数是截取多少个

4、toLowerCase 和 toUpperCase

●作用:这两个方法分别是用来给字母格式的字符串转成 小写字母 和 大写字母 的

●语法:

○字符串.toLowerCase()

○字符串.toUpperCase()

var str = 'hello world'
//使用toUppercase转换成大写
var upper = str.toUppercase(console.log(upper)// HELLO WORLD
//使用 toLowercase转换成小写
var lower = upper.toLowerCase()console.log(lower) // hello world

5、slice

●作用:截取字符串

●语法:字符串.slice(起始索引,结束索引)

○包含开始的索引对应的内容,不包含结束索引对应的内容

○结束索引不写就直接截取到末尾

●返回值:截取出来的字符串

var str = ' hello world'
/使用slice截取字符串
var res = str.slice(1,4) //ell
console.log(res);
//没有结束的索引直接截取到末尾
var res1 = str.slice(1)//ello world
console.log(res1);

6、replace

●作用:用指定的内容替换掉字符串中的内容

●语法:字符串.repalce(被替换的内容,要替换的内容)

○被替换内容 => 换下内容

○要替换内容 => 换上内容

●返回值:替换好的字符串

●注意:内容只能被替换一次,从索引0 的位置开始

var str = 'hello world'
//使用replace替换字符串中的内容
var res -str.replace('l','M')
console.log(res);// heMlo world
console.log(str); // hello world

7、split

●作用:按照切割符号, 把字符串切割开, 放在一个数组里面.

●语法:字符串.split('指定的切割符')

○切割符可以不传递,就会和整体当做一个字符串

○('')空字符串会一位一位的切割

○(' ') 字符串中有空格 会按照原字符串中的空格切割

●返回值:一个用指定切割符切割好的数组

//使用split切割成一个数组var res = str.splitO
console.log(res);//E'hello world']
var res1 = str.split('')
console.log(res1);//['h', 'e', 'l','l','o',' ','w','o','r', 'l', 'd']
var res2 = str.splitC(' ')
console.log(res2);//L'hello', 'world']

8、concat

●作用:字符串拼接也可以说是字符串合并

●语法:字符串.concat(字符串)

●返回值:拼接后的字符串

var str = 'hello world '
var str1 = 'ni hao'
//使用concat 切割成一个数组
var res = str.concat( 'ni hao' )
console.log(res); // hello world ni hao
var res1 = str.concat(str1)
console.log(res1); // hello world ni hao

9、trim

●作用:取出字符串头尾的空白内容

●语法:字符串.trim()

●返回值:去除空白内容以后的字符串

var str = ' hello world '
//使用trim切割成一个数组
var res = str.trim()
console.log(res); // hello world

10、trimStart / trimLeft

●作用:去除字符串头部的空白内容

●语法:

○字符串.trimStart()

○字符串.trimLeft()

●返回值:去除空白内容以后的字符串

var str = ' hello world '
//使用trimStart后者trimLeft去除头部的空白内容
var res = str.trimstart()
console.log(res);//hello world
var res1 = str.trimLeft()
console.log(res1); //hello world

11、trimEnd / trimRight

●作用:去除字符串尾部的空白内容

●语法:

○字符串.trimtrimEnd()

○字符串.trimRight()

●返回值:去除空白内容以后的字符串

var str = ' hello world '
//使用trimEnd后者trimRight去除尾部的空白内容
var res = str.trimEnd()
console.log(res); // hello world
var res1 = str.trimRight(
console.log(res1);// hello world

12、search()

●作用:search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。

●语法:

○字符串.search()

●返回值:如果没有找到任何匹配的子串,则返回 -1。

var str="abc DEF!" // 要执行忽略大小写的检索,请追加标志 i。
console.log(str.search(/DEF/))//4

三:结尾

        以上就是在JavaScript处理字符串中比较常用到的一些方法,虽然有些不同方法处理结果是相同的,但是在使用性能等方面也各有优劣。各位小伙伴可以根据自己实际的开发需求自行选择。

        好啦本文就到此为止咯,希望能对各位小伙伴有所帮助哦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1184188.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

机器学习——逻辑回归

一、分类问题 监督学习的最主要类型 分类(Classification): 身高1.85m,体重100kg的男人穿什么尺码的T恤?根据肿瘤的体积、患者的年龄来判断良性或恶性?根据用户的年龄、职业、存款数量来判断信用卡是否会…

【AWS系列】使用 Amazon SageMaker 微调和部署 ChatGLM 模型

前言 大语言模型是一种基于深度学习技术的人工智能模型,可以追溯到早期的语言模型和机器翻译系统。直到最近,随着深度学习技术的崛起,大型预训练语言模型才开始引起广泛的关注。 大语言模型使用大规模的文本数据集进行预训练,从而…

【VSCode】VSCode自定义代码编辑区背景色

// A code block { "editor.fontSize": 16, "editor.mouseWheelZoom": true, "editor.tabSize": 2, "workbench.colorCustomizations": { // 写在 Atom One Light 里面则只对该主题有效 "[Atom One Light]"…

GreenPlum简介

简介 Greenplum是一家总部位于**美国加利福尼亚州,为全球大型企业用户提供新型企业级数据仓库(EDW)、企业级数据云(EDC)和商务智能(BI)提供解决方案和咨询服务的公司,在全球已有:纳斯达克,纽约证券交易所,Skype. FOX&…

第四章:java关键字super

系列文章目录 文章目录 系列文章目录前言一、super关键字二、super 和 this 的比较总结 前言 super关键字可以用于对象访问父类成员。 一、super关键字 super 代表父类的引用, 用于访问父类的属性、 方法、 构造器。 super.属性名 //访问父类的属性,不…

2003-2022年高铁数据高铁开通时间数据

2003-2022年高铁数据高铁开通时间数据 1、时间:2003-2022年 2、指标:高铁站名称、开通时间、所在省份、所在城市、所属线路名称、以及相关备注 3、指标说明: Hsrwsnm[高铁站名称]-高铁站名称 Optm[开通时间]-高铁站开通的时间 Prvn[所在…

java传base64返回给数据报404踩坑

一、问题复现 1.可能因为base64字符太长,导致后端处理时出错,表现为前端请求报400错误; 这一步debug进去发现base64数据是正常传值的 所以排除掉不是后端问题,但是看了下前端请求,猜测可能是转换base64时间太长数据过大导致的404 2.前端传…

【C++】——基础编程

🎃个人专栏: 🐬 算法设计与分析:算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础:Java基础_IT闫的博客-CSDN博客 🐋c语言:c语言_IT闫的博客-CSDN博客 🐟MySQL&#xff1a…

牵手世界顶尖科学家论坛,五粮液扩大国际高端平台布局

执笔 | 尼 奥 编辑 | 扬 灵 11月6日,以“科学引领变革 重塑世界韧性”为主题的第六届世界顶尖科学家论坛(以下简称“顶科论坛”)在上海召开。来自25个国家和地区,包括27位诺奖得主在内的100余位海外顶尖科学家、40余位中国两…

OpenCV(opencv_apps)在ROS中的视频图像的应用(重点讲解哈里斯角点的检测)

1、引言 通过opencv_apps,你可以在ROS中以最简单的方式运行OpenCV提供的许多功能,也就是说,运行一个与功能相对应的launch启动文件,就可以跳过为OpenCV的许多功能编写OpenCV应用程序代码,非常的方便。 对于想熟悉每个…

融云出海:从全球最多 MAU 的 10 款社交 App,看设计细节的重要性

近期,微信又悄悄进行了一次消息弹窗的更新,再次引发网友热议。在最新版本中,用户在聊天时,也能看到新消息的内容,让不少用户大呼方便。实际上,在过去几年,微信的每一次细小更新都会引发“用户到…

如何提高企业竞争力?CRM管理系统告诉你

随着竞争形势和商业环境的加剧,企业需要迅速适应不断变化的消费需求。不少企业使用CRM客户管理系统来优化业务流程,管理客户信息,实现更多的业绩增长。那么我们来说说,CRM系统如何提高企业竞争力? 强大的数据管理&…

一次性搞懂长轮询、短轮询、SSE、websocket区别

[[toc]] http的4种推送技术 客户端轮询:传统意义上的短轮询(Short Polling)服务器端轮询:长轮询(Long Polling)单向服务器推送:Server-Sent Events(SSE)全双工通信:WebSocket图中 每个箭头代表的是 http 连接 tcp的长连接和短连接 http keep-alive 是什么? 本质:…

打包 广告

小米广告 Type android.support.v4.app.INotificationSideChannel is defined multiple times d8clsPath: Error in D:\ChannelFolder\JJChannelPackageForTest\ToolConfigPath\channels-ad\ATemp-100057\xiaomi\lib\xiaomi_ad_merge_20231104.jar:android/support/v4/app/IN…

【中国知名企业高管团队】系列61:海尔Haier

今明两天,华研荟为您介绍中国的另外两个家电巨头,这两个巨头的发展历程都高度相似,都有赖于第一代创业者敏锐和坚持,而且同处一地。他们是海尔和海信,今天先介绍海尔。 一、认识海尔集团 根据海尔集团官网介绍&#…

innovus:解决报告复制时一行拆成两行的问题

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? innovus复制报告时一行的东西出现在两行上,解决只需要一条命令: set_table_style -no_frame_width

代码随想录算法训练营第四十七天 | LeetCode 198. 打家劫舍、213. 打家劫舍 II、337. 打家劫舍 III

代码随想录算法训练营第四十七天 | LeetCode 198. 打家劫舍、213. 打家劫舍 II、337. 打家劫舍 III 文章链接:打家劫舍 打家劫舍 II 打家劫舍 III 视频链接:打家劫舍 打家劫舍 II 打家劫舍 III 1. LeetCode 198. 打家劫舍 1.1 思路 我们要去偷钱&#…

python使用memory_profiler分析代码运行内存占用

memory_profile memory_profiler源码仓库 安装 pip install memory_profiler 使用 请参考以下文章,写的很详细 【精选】Python代码优化工具——memory_profiler_被Python玩的Kenny的博客-CSDN博客 本文要增加介绍的是API使用 目录结构 |--my.py |--tests | |-- test_m…

设计模式之保护性暂停

文章目录 1. 定义2. 实现保护性暂停模式3. Join原理4. 保护性暂停模式的扩展 1. 定义 即Guarded Suspension,用在一个线程等待另一个线程的执行结果。 有一个结果需要从一个线程传递给另一个线程,让他们关联到同一个GuarderObject(这就是保…

快速教程|如何在 AWS EC2上使用 Walrus 部署 GitLab

Walrus 是一款基于平台工程理念的开源应用管理平台,致力于解决应用交付领域的深切痛点。借助 Walrus 将云原生的能力和最佳实践扩展到非容器化环境,并支持任意应用形态统一编排部署,降低使用基础设施的复杂度,为研发和运维团队提供…