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…

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

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

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

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

【Linux】:文件系统

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

JavaEE平台技术——MyBatis

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

个性化联邦学习-综述

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

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

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

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

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

算法训练 第六周

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

基于Pymavlink协议的BlueROV开发

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

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

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

【广州华锐互动】气象卫星监测AR互动教学软件为气象学习带来更多乐趣

由VR制作公司广州华锐互动开发的气象卫星监测AR互动教学软件是一款结合了增强现实(AR)技术与气象监测技术的教育软件。它通过直观、互动的方式,帮助学生更好地理解和掌握气象监测的基本知识和技能。本文将从气象卫星监测AR互动教学软件的应用场景、优势分析、实际意…

【SVN】

SVN 1 svn使用1.1 主干合并到分支1.2 分支合并到主干1.3 分支建立1.4 创建分支1.5 切换分支1.6 合并分支1.7 删除分支 2 概念理解 1 svn使用 1.1 主干合并到分支 首先,在本地trunk中先update一下,有冲突的解决冲突,保证trunk和repository已…

初步了解 RabbitMQ

目录 ​编辑一、MQ 概述 1、MQ 的简介 2、MQ 的用途 (1)限流削峰 (2)异步解耦 (3)数据收集 二、RabbitMQ 概述 1、RabbitMQ 简介 2、四大核心概念 3、RabbitMQ 的核心部分 ​编辑 4、名词解释: 三、Hello …

用C++编写动画+音频版极乐净土

#define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<graphics.h> #include<Windows.h> #include<MMSystem.h>//播放音乐所需要的头文件 #pragma comment(lib,"winmm.lib")//告诉编译器&#xff0c;加载winmm.lib库文件 #define C…

[黑马程序员Pandas教程]——Pandas缺失值处理

目录&#xff1a; 学习目标空值和缺失值查看缺失值 加载数据并通过info函数初步查看缺失值情况df.isnull().sum()空值数量统计Missingno库对缺失值的情况进行可视化探查 安装missingno库missingno.bar(df)缺失值数量可视化missingno.matrix(df)缺失值位置的可视化missingno.he…

线扫相机DALSA软件开发套件有哪些

Win10和Win7系统完整SDK目录截图&#xff1a; Sapera Configuration 缓存与内存管理&#xff0c;以及通信端口配置工具&#xff0c;部分功能等效于Detection(查找相机)内的Settings。 Sapera Log Viewer 打开Log Viewer后会显示之前发生过的所有与Sapera LT软件有关的运行信息…

15套前端经典实战项目大合集,小白练手必备实战项目

15套前端经典实战项目大合集&#xff0c;悄悄练习&#xff0c;你会惊艳所有人。 今日我以内卷为荣&#xff0c;明日内卷以我为荣&#xff0c;不管学习哪门语言都要做出实际的东西来&#xff0c;这个实际的东西就是项目。 这里整理了15前端经典实战项目&#xff0c;每套都有完…