JS操作字符串常见方法

目录

一:前言

二:常见的内置方法

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.mzph.cn/news/134569.shtml

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

相关文章

flutter开发报错The instance member ‘widget‘ can‘t be accessed in an initializer

文章目录 问题描述问题原因解决方法 问题描述 The instance member ‘widget’ can’t be accessed in an initializer. 问题原因 “The instance member ‘widget’ can’t be accessed in an initializer” 错误是因为在初始化器列表中(constructor initializer…

[ACTF2020 新生赛]Upload 1

题目环境: 仍旧是文件上传漏洞 这道题和上一道大差不差、大同小异、这里不再赘述。 [极客大挑战 2019]Upload 1:https://blog.csdn.net/m0_73734159/article/details/134267317?spm1001.2014.3001.5501 区别在于本题需要在抓包数据里面改文件后缀&#…

2023年11月5日网规考试备忘

早上题目回忆: pki体系 ipsec,交换安全(流量抑制) aohdlc bob metclaf —ethernet pon tcp三次握手 OSPF lsa?交换机组ospf配置问题,ping网关可通,AB不通 raid6 300G*8 网络利用率 停等协议10…

【踩坑专栏】禁止kafka自带的日志

在测试kafka的时候&#xff0c;有很多kafka自带的debug和info日志&#xff0c;需要禁止掉。 方法[1]如下&#xff1a; 在resource文件夹下&#xff0c;新增一个logback.xml文件。 内容如下&#xff1a; <configuration scan"true" scanPeriod"10 seconds&q…

《009.Springboot+vue之进销存管理系统》

《009.Springbootvue之进销存管理系统》 项目简介 [1]本系统涉及到的技术主要如下&#xff1a; 推荐环境配置&#xff1a;DEA jdk1.8 Maven MySQL 前后端分离; 后台&#xff1a;SpringBootMybatisredis; 前台&#xff1a;vueElementUI; [2]功能模块展示&#xff1a; 1.用户管…

亚马逊合规,亚马逊涉及12个站点合规政策更新,需警惕合规要求!

最近&#xff0c;许多亚马逊站点的卖家陆续收到了合规政策更新的通知邮件&#xff0c;涵盖了美国站、加拿大站、英国站、法国站、意大利站、德国站以及西班牙站。 这些更新影响了不同品类的卖家&#xff0c;包括以下品类&#xff1a; 美国站&#xff08;US&#xff09;对于“发…

基于UNI-APP实现适配器并保证适配器和实现的调用一致

概述 前端功能的实现是基于不同的环境采用不同的实现方式的。一种是企业微信小程序&#xff0c;需要基于企业微信框架实现。一种是移动APP&#xff0c;需要基于uni-app的中底层实现。为了调用方便&#xff0c;需要将两种实现统一在一种适配器中&#xff0c;调用者只需要指定环…

【Linux】:文件系统

文件系统 一.认识硬件-磁盘1.磁盘的物理构成2.磁盘的存储构成3.逻辑结构 二.文件系统 文件内容属性&#xff0c;前面我们所说的文件操作都是针对以打开的文件&#xff0c;那么未打开的文件呢&#xff1f;当然是在磁盘上储存着&#xff0c;接下来谈谈它是如何储存的。 一.认识硬…

JavaEE平台技术——MyBatis

JavaEE平台技术——MyBatis 1. 对象关系映射框架——Hibernate、MyBatis2. 对象关系模型映射3. MyBatis的实现机制4. MyBatis的XML定义5. Spring事务 在观看这个之前&#xff0c;大家请查阅前序内容。 &#x1f600;JavaEE的渊源 &#x1f600;&#x1f600;JavaEE平台技术——…

个性化联邦学习-综述

介绍阅读的三篇个性化联邦学习的经典综述文章 Three Approaches for Personalization with Applications to Federated Learning 论文地址 文章的主要内容 介绍了用户聚类&#xff0c;数据插值&#xff0c;模型插值三种个性化联邦学习的方法。 用户聚类&#xff1a; 目的&a…

智能井盖传感器助力建设数字化城市

在推进智慧城市建设过程中&#xff0c;多个城市在打造数字化管理平台&#xff0c;因为通过科学技术手段统一管理城市各种基础设施建设&#xff0c;可以缓解传统人工不足所导致的执法困难的问题&#xff0c;而且可以方便城市管理及时响应。在智慧城市建设过程中&#xff0c;城市…

计算机视觉

目录 一、图像处理 main denoise 二、Harris角点检测 三、Hough变换直线检测 四、直方图显著性检测 五、人脸识别 六、kmeans import 函数 kmeanstext 七、神经网络 常用函数&#xff1a; imread----------读取图像 imshow---------显示图像 rgb2hsv---------RGB转…

【慢SQL性能优化】 一条SQL的生命周期 | 京东物流技术团队

一、 一条简单SQL在MySQL执行过程 一张简单的图说明下&#xff0c;MySQL架构有哪些组件和组建间关系&#xff0c;接下来给大家用SQL语句分析 例如如下SQL语句 SELECT department_id FROM employee WHERE name Lucy AND age > 18 GROUP BY department_id其中name为索引&a…

基于MindAR实现WebAR人脸识别追踪功能

前言 调研 AR SDKValueARKitARKit 是一个移动端 AR 平台&#xff0c;用于在 iOS 上开发增强现实 app&#xff1b;SLAM场景识别、SLAM场景识别、刻度估量、基本边界的垂直和水平面检测、快速稳定的动作捕捉、多重人脸追踪、多人会话、同步前置、后置摄像头ARCoreARCore 是 Goo…

合肥工业大学操作系统实验5

✅作者简介:CSDN内容合伙人、信息安全专业在校大学生🏆 🔥系列专栏 :hfut实验课设 📃新人博主 :欢迎点赞收藏关注,会回访! 💬舞台再大,你不上台,永远是个观众。平台再好,你不参与,永远是局外人。能力再大,你不行动,只能看别人成功!没有人会关心你付出过多少…

算法训练 第六周

二、二叉树的中序遍历 本题给我们了一个二叉树&#xff0c;要求我们以中序遍历的方式输出它的值。 1.递归法 使用递归的方式来模拟遍历二叉树的过程&#xff0c;按照左头右的顺序进行&#xff0c;递归终止条件为遇到空节点&#xff0c;具体代码如下&#xff1a; /*** Defini…

电动车码表供电专用降压芯片 电动滑板车降压芯片

中广芯源推出高耐压110V降压IC&#xff0c;封装为SOP8&#xff0c;该芯片可以实现宽电压15-110V输入&#xff0c;最高1A电流输出&#xff0c;并且可以实现开关频率可调&#xff0c;支持12V 1A输出 24V 1A输出&#xff0c;可以广泛的用于电动汽车&#xff0c;电瓶游览车&…

基于Pymavlink协议的BlueROV开发

1 BlueROV概述 1.1 什么是ROV 维基百科遥控潜水器&#xff08;Remotely operated underwater vehicle&#xff0c;缩写ROV&#xff09;是一个无人的水下航行器&#xff0c;以电缆连接到母船的人员操作。常搭载水下光源和照相机、摄影机、机械手臂、声纳等。因为具有机械手臂&a…

小白学爬虫:通过关键词搜索1688商品列表数据接口|1688商品列表数据接口|1688商品列表数据采集|1688API接口

通过关键词搜索1688商品列表数据接口可以使用1688开放平台提供的API接口实现。以下是使用关键词搜索商品列表数据的基本步骤&#xff1a; 1、注册并获取AppKey。 2、构造请求参数&#xff0c;包括搜索关键词、页码、每页条数等。 3、通过API接口链接&#xff0c;将请求参数发送…

react:路由

官方文档&#xff1a;https://reactrouter.com/en/main/start/overview#pending-navigation-ui 一&#xff1a;简单版本 先 npm i react-router-dom main.ts中内容替换为 import ReactDOM from react-dom/client import App from ./App.tsx import ./index.css import {creat…