(JavaScript-原⽣)字符串的20个常⽤⽅法+字符串遍历器
+模板字符串
(JavaScript - 原⽣)字符串的20个常⽤⽅法 + 字符串遍历器 + 模板字符串
⽼⽣常谈,⽆论是职场达⼈还是初出茅庐的⼩⽩相信对JavaScript中的字符串都不会陌⽣吧,⽽且字符串这个元素在前端整个开发的过程中出现的频率、重要程度 ... 都是⽆可⽐拟的,今天我们来⼀起揭开JavaScript下字符串的神秘⾯纱,希望真正做到深⼊浅出。
## 在JavaScript中String类型是基本数据类型,这⼀点与其在Java等其它后台语⾔中为引⽤类型不同。
## 定义字符串:
let str = "好好学习,天天向上";
⼀、字符串常⽤的19个⽅法:
> -1).查指定字符所在位置的索引
①.indexOf("指定字符");从前向后
// A.indexOf(Xxx);从前向后
console.log(str.indexOf("学"));// 打印 2
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:从前向后查指定字符的索引
* -2).⽤法:str.indexOf("指定字符");
* -3).返回值:如果到 -> 返回指定字符所在位置的索引
* 如果未到 -> 返回-1
* -4).是否改变原字符串:否
*/
②.lastIndexOf("指定字符");从后向前
/
/ B.lastIndexOf(Xxx);从后向前
console.log(str.lastIndexOf("习"));// 打印 3
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:从后向前查指定字符所在位置的索引
* -2).⽤法:str.lastIndexOf("指定字符");
* -3).返回值:如果到 -> 返回指定字符所在位置的索引
* 如果未到 -> 返回-1
* -4).是否改变原字符串:否
*/
③.search("指定字符"/正则表达式); -> ⽀持正则表达式
/
/ C.search(Xxx);⽀持正则表达式
console.log(str.search(","));// 打印 4
console.log(str.search(/[\u4e00-\u9fa5]$/));// 打印 8
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:查指定字符所在位置的索引
* -2).⽤法:str.search("指定字符"/正则表达式);
* -3).返回值:如果到 -> 返回指定字符所在位置的索引
* 如果未到 -> 返回-1
* -4).是否改变原字符串:否
*/
> -2).查指定索引对应的字符
①.charAt(索引);
// A.charAt(Xxx);
console.log(str.charAt(0));// 打印好
/**
* -1).⽤处:通过指定索引查对应字符串
* -2).⽤法:str.charAt(指定索引);
* -3).返回值:如果到 -> 返回对应字符
* 如果未到 -> 返回"" -> 空字符串
* -4).是否改变原字符串:否
*/
②.charCodeAt(索引);
// B.charCodeAt(Xxx);
console.log(str.charCodeAt(0));// 打印 22909
console.log(str)// 打印好好学习,天天向上
/**
* -1).⽤处:通过指定索引查对应字符串所对应的Unicode编码
* -2).⽤法:str.charCodeAt(指定索引);
* -3).返回值:如果到 -> 返回指定位置的字符的Unicode编码
* 如果未到 -> 返回NaN
* -4).是否改变原字符串:否
*/
③.match("字符"/正则表达式); -> ⽀持正则表达式
console.log(str.match("天"));// 打印 [ '天', index: 5, input: '好好学习,天天向上' ] console.log(String.call(str.match("天")));// 打印 [object Array] console.log(str.match(/[好]/g));// 打印 [ '好', '好' ]
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:通过指定字符查对应字符,⽀持正则表达式
* -2).⽤法:str.match("字符"/正则表达式);
* -3).返回值:如果到 -> 返回⼀个存储指定字符的数组
* 如果未到 -> 返回null
* -4).是否改变原字符串:否
*/
> -3).字符串的截取
①.substr(起始索引, 截取个数);
// A.substr(num1, num2);
console.log(str.substr(0, 2));// 打印好好
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:截取字符串
* -2).⽤法:str.substr(起始索引, 截取的个数);
* -3).返回值:返回⼀个截取的新字符串
* -4).是否改变原字符串:否
*/
## 拓展 -> 基于substr⽅法实现字符串克隆
console.log(str.substr(0, str.length));// 打印好好学习,天天向上
②.substring(起始索引, 结束索引);左闭右开
// B.substring(起始索引, 结束索引);左闭右开
console.log(str.substring(0, 4));// 打印好好学习
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:截取字符串
* -2).⽤法:str.substring(起始索引, 结束索引);
indexof的用法javascript* -3).返回值:返回⼀个截取的新字符串
* -4).是否改变原字符串:否
*/
## 拓展 -> 基于substring⽅法实现字符串克隆
// 拓展 -> 基于substring⽅法实现字符串克隆
console.log(str.substring(0, str.length));// 打印好好学习,天天向上 ③.slice(起始索引, 结束索引);左闭右开,⽀持负数索引
// C.slice(起始索引, 结束索引);
console.log(str.slice(0, 4));// 打印好好学习
console.log(str.slice(0, -1));// 打印好好学习,天天向
/**
* 负数索引的计算⽅式: 9 + -1
* str.slice(0, -1) => str.slice(0, str.length + -1)
*/
/**
* -1).⽤处:截取字符串,⽀持负数索引
* -2).⽤法:str.slice(起始索引, 结束索引);
* -3).返回值:返回⼀个截取的新字符串
* -4).是否改变原字符串:否
*/
## 拓展 -> 基于slice⽅法实现字符串克隆
console.log(str.slice(0, str.length));// 打印好好学习,天天向上
> -4).字符串拆分、替换
①.拆分:split("分隔符");
// A.split("分隔符");
console.log(str.split(","));// 打印 [ '好好学习', '天天向上' ]
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:分割字符串
* -2).⽤法:str.split("分隔符");
* -3).返回值:返回分割完成的字符串数组
* -4).是否改变原字符串:否
*/
②.替换:replace("被替换字符", "替换字符");
let strr = str.slice(0, str.length);
console.place("好好", "认真"));// 打印认真学习,天天向上 console.log(strr);// 打印好好学习,天天向上
/**
* -1).⽤处:替换指定字符
* -2).⽤法:place("旧字符串", "新字符串");
* -3).返回值:返回替换完成的字符串
* -4).是否改变原字符串:否
*/
> -5).字符的⼤⼩写转换
①.⼩写转⼤写:toUpperCase();
// A.toUpperCase
strr = "Hello World";
console.UpperCase());// 打印 HELLO WORLD
console.log(strr);// 打印 Hello World
②.⼤写转⼩写:toLowerCase();
strr = UpperCase();
console.log(strr);// 打印 HELLO WORLD
console.LowerCase());// 打印 hello world
> -6).查指定字符
①.includes("指定字符");在整个字符串中
// A.includes("指定字符");
console.log(str.includes("天"));// 打印 true
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:查指定字符
* -2).⽤法:str.includes("指定字符");
* -3).返回值:如果到 -> 返回true
* 如果未到 -> 返回false
* -4).是否改变原字符串:否
*/
②.startsWith("指定字符");仅仅在开头
// B.startsWith("指定字符");
console.log(str.startsWith("好"));// 打印 true
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:查指定字符(仅查字符串开头)
* -2).⽤法:str.startsWith("指定字符");
* -3).返回值:如果到 -> 返回true
* 如果未到 -> 返回false
* -4).是否改变原字符串:否
*/
③.endsWith("指定字符");仅仅在结尾
// C.endsWith("指定字符");
console.dsWith("上"));// 打印 true
console.log(str);// 打印好好学习,天天向上
/**
* -1).⽤处:查指定字符(仅查字符串结尾)
* -2).⽤法:dsWith("指定字符");
* -3).返回值:如果到 -> 返回true
* 如果未到 -> 返回false
* -4).是否改变原字符串:否
*/
> -7).重复字符串
①.repeat(Xxx);
/**
* 注意:
* -1).如果参数为⼩数则向下取整。
* -2).如果参数为⾮有效数字(⾮数字字符串/NaN)则按0计算重复次数。
* -3).如果参数是数字字符串/布尔值,先进⾏数据类型转换为Number再计算重复次数。 */
console.peat(2.6));// 打印好好学习,天天向上好好学习,天天向上
console.log(str);// 打印好好学习,天天向上
console.peat("哈"));// 打印为空
console.peat(NaN));// 打印为空
console.peat("2"));// 打印好好学习,天天向上好好学习,天天向上
console.peat(true));// 打印好好学习,天天向上
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论