(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(Object.prototype.toString.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(起始索引, 结束索引); * -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.log(strr.replace("好好", "认真"));// 打印 认真学习,天天向上
console.log(strr);// 打印 好好学习,天天向上/**
* -1).用处:替换指定字符
* -2).用法:str.replace("旧字符串", "新字符串");
* -3).返回值:返回替换完成的字符串
* -4).是否改变原字符串:否
*/
> -5).字符的大小写转换
①.小写转大写:toUpperCase();
// A.toUpperCase
strr = "Hello World";
console.log(strr.toUpperCase());// 打印 HELLO WORLD
console.log(strr);// 打印 Hello World②.大写转小写:toLowerCase();
strr = strr.toUpperCase();
console.log(strr);// 打印 HELLO WORLD
console.log(strr.toLowerCase());// 打印 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.log(str.endsWith("上"));// 打印 true
console.log(str);// 打印 好好学习,天天向上/**
* -1).用处:查找指定字符(仅查找字符串结尾)
* -2).用法:str.endsWith("指定字符");
* -3).返回值:如果找到 -> 返回true
* 如果未找到 -> 返回false
* -4).是否改变原字符串:否
*/
> -7).重复字符串
①.repeat(Xxx);
/** * 注意: * -1).如果参数为小数则向下取整。 * -2).如果参数为非有效数字(非数字字符串/NaN)则按0计算重复次数。 * -3).如果参数是数字字符串/布尔值,先进行数据类型转换为Number再计算重复次数。 */
console.log(str.repeat(2.6));// 打印 好好学习,天天向上好好学习,天天向上
console.log(str);// 打印 好好学习,天天向上
console.log(str.repeat("哈"));// 打印为空
console.log(str.repeat(NaN));// 打印为空
console.log(str.repeat("2"));// 打印 好好学习,天天向上好好学习,天天向上
console.log(str.repeat(true));// 打印 好好学习,天天向上/** * -1).用处:重复字符串 * -2).用法:str.repeat(Xxx); * -3).返回值:重复指定次数的字符串 * -4).是否改变原字符串:否 */
> -8).字符串补全
①.padStart(指定字符串长度, 填充元素);在开头填充
// A.padStart(指定字符串的长度, 替换字符);
console.log(str.padStart(11, "ab"));// 打印 ab好好学习,天天向上
console.log(str);// 打印 好好学习,天天向上/** * -1).用处:字符串补全(从头补全) * -2).用法:str.padStart(指定字符串的长度, 替换字符); * -3).返回值:补全后的字符串 * -4).是否改变原字符串:否 */
②.padEnd(指定字符串长度, 填充元素);在结尾填充
// B.padEnd(指定字符串的长度, 替换字符);
console.log(str.padEnd(11, "ab"));// 打印 好好学习,天天向上ab
console.log(str);// 打印 好好学习,天天向上/** * -1).用处:字符串补全(从尾补全) * -2).用法:str.padStart(指定字符串的长度, 替换字符); * -3).返回值:补全后的字符串 * -4).是否改变原字符串:否 */
> -9).字符串去除首尾空格
①.trim();去除首尾空格
let str_4 = " 好好 学习 ";
console.log(str_4.trim());//好好 学习
console.log(str_4);// 好好 学习/** * -1).用处:字符串去除空格 * -2).用法:str.trim(); * -3).返回值:返回去除首尾空格的新字符串 * -4).是否改变原字符串:否 */
二、字符串遍历器
for ... of ...
for(let item of str) {
console.log(item);
/**
* 天
* 天
* 向
* 上
*/
}三、模板字符串
定义变量
let price = 100;记得我们ES5包括之前拼接字符串都是一个耗时、不爽的操作...一溜加号,写起来费劲看着也不好看
let str_1 = "苹果价格:" + price + "元";
console.log(str_1);// 打印 苹果价格:100元ES6的模板字符串:解决了这个问题 ...
## 模板字符串的使用方式:通过``(``在tab键上面那个键)包裹,通过${Xxx}引用变量。
// ES6的模板字符串 -> 通过``(``在tab键上面那个键)包裹,通过${Xxx}引用变量。
str_1 = `苹果价格:${price}元`;
console.log(str_1);// 打印 苹果价格:100元这样一来不仅不用写加号,而且更加直观,模板字符串还有一个好处就是保留格式:
ES5
let str_2 = "1" +
"2";
console.log(str_2);// 打印 12ES6的模板字符串会保留我们的敲'回车'以后的格式
let str_3 = `1
2`;
console.log(str_3);打印结果:↓↓↓
总结:本章节主要介绍了字符串的常用的20种方法以及ES6提供的字符串遍历器和模板字符串。基本上本片博文涵盖了我们日常开发在字符串方面的绝大多数操作。希望与大家共勉!!!如有意见或者建议请在下方留言,我会在第一时间回复!!!