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的大学生,如果我的文章给你带来的帮助,欢迎您关注我->我会持续不断的更新更多优质文章.

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

相关文章
|
JavaScript 前端开发 API
第一章 JavaScript --下
第一章 JavaScript --下
55 0
|
JSON JavaScript 前端开发
第一章 JavaScript --上
第一章 JavaScript --上
59 0
|
前端开发
前端知识案例34-javascript基础语法-var和let区别
前端知识案例34-javascript基础语法-var和let区别
54 0
前端知识案例34-javascript基础语法-var和let区别
|
前端开发
前端知识案例99-javascript基础语法-Set
前端知识案例99-javascript基础语法-Set
40 0
前端知识案例99-javascript基础语法-Set
|
前端开发
前端知识案例40-javascript基础语法-创建数组
前端知识案例40-javascript基础语法-创建数组
43 0
前端知识案例40-javascript基础语法-创建数组
|
前端开发
前端知识案例79-javascript基础语法-字符串定义和转义
前端知识案例79-javascript基础语法-字符串定义和转义
56 0
前端知识案例79-javascript基础语法-字符串定义和转义
|
前端开发
前端知识案例30-javascript基础语法-函数默认值
前端知识案例30-javascript基础语法-函数默认值
53 0
前端知识案例30-javascript基础语法-函数默认值
|
前端开发
前端知识案例53-javascript基础语法-数组过滤
前端知识案例53-javascript基础语法-数组过滤
68 0
前端知识案例53-javascript基础语法-数组过滤
|
前端开发
前端知识案例49-javascript基础语法-数组连接
前端知识案例49-javascript基础语法-数组连接
46 0
前端知识案例49-javascript基础语法-数组连接
|
前端开发
前端知识案例117-javascript基础语法-默认导出
前端知识案例117-javascript基础语法-默认导出
44 0
前端知识案例117-javascript基础语法-默认导出