JavaScript学习第二章--字符串

简介: 本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。

1.系列介绍

🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

此系列的内容由自己从网上各大学习网站从中抽取精髓,简化知识更易于理解再加上自己对这些知识的理解,如有不准确请各位大神指正!

js中的字符串

2.5 字符串

在js中只有==字符串==类型没有==字符==类型,连接字符串使用+号进行连接.

1.普通字符串

​ 普通字符串使用双引号==“ ”==或者单引号==‘ ’==进行包裹.

const str1 = "字符串";
const str2 = "字符串";

​ 在普通字符串中插入变量需要在双引号或者单引号中再查入对应的符号,然后中间输入变量名,但这种方式在需要插入多个变量到字符串中就会很繁琐.在下面的模板字符串就很好的解决了这个问题.

const str1 = ""+变量名+"";
const str2 = ''+变量名+'';

2.模板字符串

模板字符串使用反引号==``==进行包裹,用这种方式表达字符串可以直接进行换行,且插入变量可以使用==${}==表达式来插入变量

const a = "123";
const str = `你好${
     a}`;
console.log(str) // 输入你好123

3.字符串方法

在这里我只介绍一些字符串中常用的方法,如果想查看所有的方法可以去mdn官网点击此处跳转

3.1 charAt

返回指定==index==处的字符,

示例:

const str = '你好';
console.log(str.charAt(1)) // 好

3.2 concat

合并两个(或更多)字符串的文本并返回一个新字符串。

示例

const str1 = "你";
const str2 = "好";
console.log(str1.concat(str2)) // 你好

// 如果需要一次连接多个字符串
const str1 = "你";
const str2 = "好";
const str3 = "呀";
const str4 = "!";
console.log(str1.concat(str2,str3,str4))

3.3 endsWith

确定字符串是否以字符串 searchString 的字符结尾。

示例:

const str = "你好呀";
console.log(str.endsWith("呀")); // true
console.log(str.endsWith("好")); // false

3.4 includes

确定调用字符串是否包含 searchString

示例:

const str1 = "你好";
console.log(str1.inclueds("你")) // true

3.5 indexOf

返回在字符串中第一次出现的 searchValue 的索引,如果未找到则返回 -1

示例:

const str = "你好";
console.log(str.indexOf("你")); // 0

3.6 lastIndexOf

返回在字符串中最后一次出现的 searchValue 的索引,如果未找到则返回 -1

const str = "你好你";
console.log(str.indexOf("你")); // 2

3.7 padEnd和padStart

==padEnd==:用给定字符串从末尾填充当前字符串并返回长度为 targetLength 的新字符串。

==padStart==:用给定字符串从开头填充当前字符串并返回长度为 targetLength 的新字符串。

示例:

const str = "你好";
console.log(str.padEnd(3,"你")) // 你好你
console.log(str.padEnd(2,"你")) // 你好 因为当前字符串的长度已经是2了所以不需要填充

const str = "你好";
console.log(str.padStart(3,"好")) // 好好你
console.log(str.padEnd(2,"好")) // 你好 因为当前字符串的长度已经是2了所以不需要填充

3.8 replace

用于查找字符串中一个你给定的字符串,正则以及函数并替换为你提供的值.

const str1 = "你好";
console.log(str1.replace("你","1")) // 1好

3.9 replaceAll

用于查找字符串中所有你给定的字符串,正则以及函数并替换为你提供的值.

const str = "你你好";
console.log(str1.replace("你","1")) // 11好

3.10 substring

返回一个从索引一到索引二(不包含)的新字符串.

const str = "你好呀";
console.log(str.substring(1,2)) // 好

3.11 silce

提取字符串的一部分并返回一个新字符串。

const str1 = "你好呀";
console.log(str1.slice(0,1)) // 你

3.12 split

返回一个由在出现子字符串 sep 时拆分调用的字符串然后填充的字符串数组。

const str = "你:好:呀";
console.log(str.split(":"))// [你,好,呀]

3.13 trim

去除字符串左右的无效空格

const str = "你好  ";
console.log(str.trim())// 你好

.结语

Hi👋,这里是瑞雨溪->一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我->我会持续不断的更新更多优质文章.

你的关注就是我的动力!!!🎉🎉🎉

目录
相关文章
|
4月前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
84 1
|
3月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
125 63
|
1月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
56 13
|
3月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
75 5
|
3月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
70 1
|
4月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
55 4
js学习--制作猜数字
|
4月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
79 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
4月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
49 4
|
4月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
52 2
|
4月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
33 2

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    68
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    33
  • 3
    Node.js 中实现多任务下载的并发控制策略
    35
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    27
  • 5
    【JavaScript】深入理解 let、var 和 const
    50
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    48
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    61
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    59
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    58