- 很高心您打开了本篇博客；
- 主要作用：通过学习JavaScript和整理笔记，为前端/后端/大数据项目提供基石；
- 复习前面五篇:
一,JavaScript基础知识。初识JavaScript，变量var和let，变量提升（var和let的区别），常量（const），标识符，注释，引入方式和输出方式-CSDN博客
二，JavaScript之数据类型。原始数据类型，引用数据类型，数据类型转换，查看数据类型。-CSDN博客
三，JavaScript之运算符，详细篇。 算数，比较，逻辑，赋值，位，其他运算符等。运算符的优先级。-CSDN博客
四，JavaScript之条件分支和循环流程。if……else条件，for和while循环。-CSDN博客
五，JavaScript重要知识点综合练习题。海量的实操和简答题，加深对JS重要知识点的运用。-CSDN博客
- 本篇是 javascript 专栏，笔记梳理的 第六篇。
- 主要内容：字符串相关。详细阐述：字符串的定义，字符串的转义，字符串的转码，字符串的索引（charAt），字符串的拼接（concat），字符串的截取（slice，substr，substring），字符串的查找下标（indexOf,lastindexOf），字符串的去除空格（trim），字符串的大小写（ toLowerCase，toUpperCase），字符串的搜索（search），字符串的重复（repeat），字符串的替换（replace），字符串的分割（split）等用法，以及应用场景案例。
- 学习：知识的初次邂逅
- 复习：知识的温故知新
目录
十三，字符串的大小写函数 toLowerCase() 和toUpperCase()
篇首语：
JavaScript中的字符串，并且最常用的数据类型。关于它的方法有很多，本篇着重介绍了一些常用的用法，以及这些方法的应用场景和代码示例案例。
字符串的应用场景：
- 数据清洗
- 字符串格式化
- 用户输入判定
- 日志筛选
- 字符串的比较
- 数据的转换
- 数据的展示
通过合理利用字符串的方法和技巧，我们可以高效的处理文本数据，提升应用程序的交互性和用户体验，在实际项目开发中，掌握并熟练运用这些字符串的处理方法，将极大的提高开发效率和代码质量。
一，字符串的定义
字符串就是零个或者多个排在一起的字符，放在单引号或者双引号之中。
'fanmeng_leo'
"凡梦_leo"单引号字符串的内部也可以使用双引号。
'key ="value" '双引号之间也可以使用单引号
"my name is '凡梦_leo'"如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用作转义。双引号内部使用双引号也是如此。
'my name is \'凡梦\''"my name is \"凡梦\""字符串默认只能写一行内，如果要分成多行们可以在结尾使用反斜杠 \
let longstaring= 'chang\
chang\
de\
zifuchuan\
'二，字符串的转义
字符串的转义通过反斜杠 \ 当然也可以使用一些特殊字符。所以这些统称为转义符。
| null | \0 | \u0000 |
| 后退键 | \b | \u0008 |
| 换页符 | \f | \u000C |
| 回行符 | \n | \u000A |
| 回车键 | \r | \u000D |
| 制表符 | \t | \u0009 |
| 垂直制表符 | \v | \u000B |
| 单引号 | ‘ | \U0027 |
| 双引号 | " | \u0022 |
1，换行符与回车符
// 使用\n（换行符）
console.log("Hello,\nWorld!");
// 输出:
// Hello,
// World!
// 使用\r（回车键，在某些环境中可能不如\n直观）
console.log("Hello,\rWorld!");
// 注意：在某些环境中，\r可能只将光标移回行首，而不换行，导致"World!"覆盖"Hello,"
// 但大多数情况下，在控制台中，它可能看起来和\n相似
// 混合使用\r\n（Windows系统中的换行符）
console.log("Hello,\r\nWorld!");
// 输出:
// Hello,
// World!2,制表符和垂直制表符
// 使用\t（制表符）
console.log("Name\tAge\nAlice\t30\nBob\t25");
// 输出将"Name"和"Age"之间，以及"Alice"和"30"之间等距分隔
// 使用\v（垂直制表符）在大多数环境中可能不会按预期工作，因为它用于在文本中创建垂直间距，但在控制台上可能无法直观显示
// 示例可能不直接有效，但理论上用于文档或特定格式化的文本中3, 单引号和双引号
// 使用\'在字符串中表示单引号
let singleQuoteString = 'She said, \'Hello, World!\'';
console.log(singleQuoteString);
// 输出: She said, 'Hello, World!'
// 使用\"在字符串中表示双引号
let doubleQuoteString = "She said, \"Hello, World!\"";
console.log(doubleQuoteString);
// 输出: She said, "Hello, World!"4,反斜杠本身
// 使用\\来表示字符串中的反斜杠
let backslashString = "The path is C:\\Users\\Public";
console.log(backslashString);
// 输出: The path is C:\Users\Public5,其他转义字符
// \0（null字符）通常不用于打印到控制台，因为它是一个不可见的控制字符
let nullCharString = "Hello\0World";
console.log(nullCharString);
// 可能会输出Hello，但World部分可能不会显示，因为\0被视为字符串的结束（在某些情况下，特别是旧系统或语言）
// 在JavaScript中，\0不会影响字符串的其余部分，但可能会在某些字符串处理函数中引起注意
// \b（后退键）在控制台中通常不会有预期的效果，因为它用于在文本编辑器中后退一个字符
// \f（换页符）在现代浏览器和控制台中可能不会有任何效果，因为它用于打印时换到新页\n换行 和\t制表符号是最常用的转义字符，
三，字符串的长度length属性
length属性返回字符串的长度，该属性也无法改变的。
let l = 'fanmeng';
console.log(l.length);// 7字符串的长度属性，最常用的场景在于for循环中
// 使用length属性作为循环条件来遍历字符串中的每个字符
for (let i = 0; i < str.length; i++) {
console.log(str[i]); // 依次输出字符串中的每个字符
}
四，字符串的转码
所谓Base64 就是一种编码方法，可以将任意值转成0-9，A-Z,a-z,+ / 等64个字符组成的可打印的字符。
使用字符串的转码的目的，并非单单为了加密，也是为了不出现特殊的字符，简化程序的处理。
1，js原生提供的两个Base64相关的方法
- btoa(参数): 传入任意值中,都可以转为Base64编码；
- atob(参数)：传入的Base64编码转为原来的值;
let l = 'fanmeng';
console.log(l.length);// 7
console.log(btoa(l))// ZmFubWVuZw==
console.log(atob(' ZmFubWVuZw==')) // fanmeng2，处理中文编码的两个方法
- encodeURIComponent 转码
- decodeURIComponent 解码
let name = '凡梦'
console.log(encodeURIComponent(name))// %E5%87%A1%E6%A2%A6
console.log(decodeURIComponent('%E5%87%A1%E6%A2%A6')) //凡梦
function b64Encode(str) {
return btoa(encodeURIComponent(str));
}
function b64Decode(str) {
return decodeURIComponent(str);
}
console.log(b64Encode('凡梦'));// %E5%87%A1%E6%A2%A6
console.log(b64Decode('%E5%87%A1%E6%A2%A6'));//凡梦
console.log(b64Encode('fanmeng'));//ZmFubWVuZw==
console.log(b64Decode(atob('ZmFubWVuZw==')));//fanmeng五，字符串的索引 charAt（）
字符串的charAt() 方法参数是数值。传入数值 下标索引值 返回该下表对应的字符串位置
语法，通过 字符串.charAt() 调用
1，基本用法，返回索引值
//------------------------------------------------
//字符串的charAt（int）方法
let str = 'fanmeng';
console.log(str.charAt(0));//f
console.log(str.charAt(1));//a
console.log(str.charAt(2));//n
console.log(str.charAt(3));//m
console.log(str.charAt(4));//e
console.log(str.charAt(5));//n
2，当索引值超过范围的时候，返回空字符串
当索引值不在字符串长度的时候，会返回'' 空字符串。常见场景可以用在判定某个字符是否存在某个字符串之中
console.log(str.charAt(100));//undefined
//当作条件语句可以判读 某个字符是否存在
if(!str.charAt(100)){console.log('字符串不存在');}3，配合length属性取值
可以配合length 快速求值
console.log(str.charAt(str.length-1));4，charAt方法常见的应用场景
- 遍历字符串。我们可以配合循环，批量处理字符串，进行加密，解密，字符串统计或者转换等操作；
- 验证字符串中的特定字符时候存在，做条件逻辑运算；
- 字符串的格式化，快速提取指定索引的字符串，然后批量做格式化操作。
六，字符串的拼接 concat（）
字符串的concat() 方法用于拼接两个字符串，返回一个新的字符串，不改变原来的字符串。
1，基本用法，拼接字符串
// ---------------------------------------------
//字符串的concat（）方法
let s1='fm';
let s2='eng';
console.log(s2.concat(s1)); //engfm
console.log(s1.concat(s2)); //fmeng
console.log(s1.concat(' ',s2)); //fm eng
console.log(s1.concat(' ',s2,'!'));//fm eng!2,接收多个参数
console.log(''.concat(s1,s2,'')) //fmeng3，多类型数据拼接
如果类型数据不是字符串，会霸道的强制转为字符串 拼接在一起
var one = 1;
var two = 2;
var three = '3';
''.concat(one, two, three) // "123"4，concat拼接方法常见的应用场景
- 构建动态字符串：在需要不同条件或者输入动态生成的字符的时候，concat()方法非常有用，例如构建查询字符串或者拼接用户输入时；
- 文件路径的拼接：在处理文件路径的时候，需要根据不同的操作系统或者目录结构来拼接路径。
- 日志记录:在生成日志记录的时候，可能需要把时间戳，日志级别，消息内容等拼接成一个完成的日志条目；
- 构建HTML字符串：在客户端的js中，有时候需要将动态的HTML字符串插入到其他DOM元素中；
- 格式化字符串。可以添加空格，换行符，或者特定分隔符号拼接字符串，完成格式化；
七，字符串的截取 slice()
slice()是从原字符串中取除指定范围的字符串，它不改变原字符串
slice方法里面可以有2个参数，第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。
1,字符串截取函数的用法
- 获取全部的值。 字符串.slice(0,-1);
- 获取从某个索引值到最后的值 字符串.slice(2) 指定从2开始获取后面全部的值;
- 获取区间的值 字符串.slice(2,6) 包头不包尾原则，取2，3，4，5下标索引的值;
- 如果第二个字超过字符串最大长度，取最大长度
- 如果第二个字大于第一个字，会返回空字符串
<script>
var a='ss';
var b='cc';
var c='abcdefg';
document.write(c.slice(0,-1) ) // 获取全部的字符串 可以赋值给一个变量 不会改变原来的字符串 abcdefg
document.write(c.slice(0,500) ) //当最后一个数超出长度的是否 会默认获取最大值 abcdefg
document.write(c.slice(2,6) ) //cdef 更python一样 包头不包尾
document.write(c.slice(1) ) //如果只有一个值 就是从该值的下标索引到后面的全部 更charAt区别就在于 他会返回后面的全部值 bcdefg
document.write(c.slice(2,1) ) //如果第一个数值大于第二个数 会返回空的值
</script>let str = "Hello, World!";
// 从索引0到索引4（不包括索引4）提取子字符串
console.log(str.slice(0, 5)); // 输出: Hello
// 从索引7到字符串末尾提取子字符串
console.log(str.slice(7)); // 输出: World!
// 使用负数索引从字符串末尾开始提取
console.log(str.slice(-6)); // 输出: World!
// 使用负数索引和正数索引组合
console.log(str.slice(0, -6)); // 输出: Hello,
// 如果结束索引小于起始索引，则返回空字符串
console.log(str.slice(6, 1)); // 输出: ""
2,字符串截取函数的应用场景
- 提取字符串:可以从一个长字符串提取特定范围的字符串。例如从一个完整的句子中提取日期，时间，用户名等特定部分；
- 路径或者URL处理：在处理文件路径或者URL的时候，经常要提取或者修改一部分。可以用slice方法提取文件名，扩展名，查询参数等;
- 文本分割与重组:在文本处理的时候，可以使用这个方法把一个长字符串分割成多个较短的字符串，然后再对他们进一步重组。
- 字符串的裁剪与调整：裁剪字符串的开头或者和结尾的特定字符，比如空格或者换行符等，或者调整字符串以特定的显示或者存储要求。
- 字符串的格式化：可以快速准确定位和提取要操作部分的字符串部分。
- 数的提取与转换：从特定的数据结构中提取特定部分，并用作响应的转换和处理。
示例1：从URL中提取文件名
let url = "https://example.com/path/to/file.txt";
let filename = url.slice(url.lastIndexOf('/') + 1);
console.log(filename); // 输出: file.txt示例2：裁剪字符串的开头
let str = " Hello, World! ";
let trimmedStr = str.slice(str.trim().indexOf(str.trim()[0]));
// 注意：这里使用trim()和indexOf()的组合来找到非空白字符的起始位置，
// 但更直接的方法是直接使用trim()裁剪字符串的开头和结尾。
// 更好的做法：
trimmedStr = str.trim();
console.log(trimmedStr); // 输出: Hello, World!示例3：格式化字符串
let dateStr = "2023-04-01";
// 假设我们需要将日期格式化为"YYYYMMDD"格式
let formattedDate = dateStr.slice(0, 4) + dateStr.slice(5, 7) + dateStr.slice(8, 10);
console.log(formattedDate); // 输出: 20230401八，字符串截取方法二 substring()
substring方法和slice方法很类似，它里面有2个参数，第一个参数表示i字符串的开始位置，第二个位置表示结束位置。返回结果依旧是包头不包尾
- 获取全部的值。 字符串.substring(0,-1);
- 获取从某个索引值到最后的值 字符串.substring(2) 指定从2开始获取后面全部的值;
- 获取区间的值 字符串.substring(2,6) 包头不包尾原则，取2，3，4，5下标索引的值;
- 如果第二个字超过字符串最大长度，取最大长度
- 如果第二个字大于第一个字，会自动调整2个参数位置；
- 如果第一个参数索引小于0 会自动设置为0；
<script>
var st='abcdefg'
console.log(st.substring(2)) //从第二个开始 cdefg
console.log(st.substring(9,1)) //bcdefg 如果第一个数值比第二个数值大 直接调换位置
console.log(st.substring(0,-1))// 负数直接被干成0了
console.log(st.substring(3,-1))// 负数直接被干成0了 并且调换了位置 就是abc
</script>整体substring用法和slice用法差不多，substring里面有很多奇怪的特性。推荐截取函数用slice
应用场景 同slice 这里略
九，字符串的截取三 substr（）
substr（）方法用于从原字符串取出子字符串并返回，不改变原字符串。更slice和substring方法差不多
里面的两个参数，第一个是下标索引的开始位置，第二个参数是子字符串的长度。
- 第一个参数是开始的下标索引值，第二个参数是要提取的长度；
- 如果第二个参数大于字符串的长度，默认从第一个参数下标索引提取全部；
- 如果不填写第二个参数，也是从第一个参数下标索引位置提取全部；
- 长度不能是负数，如果是负数，则返回空值；
- 长度也不能为0，如果是0，也返回空置；
<script>
var a='abcdefg';
console.log(a.substr(1,3)) //bcd 第一个参数是下标索引值 第二个参数是要提取的长度
console.log(a.substr(-2,1000)) //如果第二个人数值大于字符串长度 默认直接从下标索引提取到后面的全部
console.log(a.substr(-4)) // defg 如果不填写第二个人值 默认会返回全部
console.log(a.substr(2,-4)) //长度不能为负数 也不能为0 所以就会返回空值
console.log(a.substr(2,1)) //长度不能为负数 也不能为0 所以就会返回空值
</script>应用场景同splice。主要也是用在字符串的格式化，截取，分割，重组等
十，字符串的下标值 indexOf()
indexOf()方法是用于确定一个字符串再另一个字符串第一次出现的位置，返回的结果是匹配开始的位置。如果返回-1，就表示不存在
参数可以是2个，第一个参数是要求下标索引的字符串，第二个是从按个位置开始往后匹配
- 如果不传递第二个参数，默认从最开始位置也就是0开始往后查找；
- 返回的结果是下标索引值；
- 如果找不到 就返回-1；
- 第二个参数下标索引值的长度位置。
- 这个函数是区分大小写的，也就是区分第一个参数的大小写
var st='hi nihao';
console.log(st.indexOf('h')) //0 从头开始匹配
console.log(st.indexOf('h',3)) //5 从下标索引值的3开始往后找 h出现的下标索引位置
console.log(st.indexOf('h',6)) // 如果找不到 就是返回-1
let str = "Hello, world!";
let index = str.indexOf("world");
console.log(index); // 输出: 7
// 使用 fromIndex
index = str.indexOf("o", 8);
console.log(index); // 输出: 8，因为从索引8开始查找，第一个'o'出现在索引8
// 如果没有找到子字符串
index = str.indexOf("JavaScript");
console.log(index); // 输出: -1应用场景
1,验证字符串中时候包含特定的字符串。
因为如果存在返回的就是下标索引值，不存在返回的就是-1.所以我们可以把或者当作条件用作判定。
let str = "Hello, world!";
if (str.indexOf("world") !== -1) {
console.log("字符串包含'world'。");
} else {
console.log("字符串不包含'world'。");
}2,查找并处理字符串中的特定模式。
在处理文本数据的时候，我们可能需要查找字符串的某个特地模式，比如单词，日期，特殊字符。我们可以用indexOF方法快速找到其下标索引，然后基于这个位置进行后续操作。
比如，查找并替换所有的特定单词
let str = "The cat in the hat is black.";
let searchWord = "the";
let replacedStr = "";
let index = str.indexOf(searchWord);
// 注意：这里为了简单起见，我们只处理第一次出现的情况。
// 在实际应用中，可能需要使用循环来处理所有出现的情况。
if (index !== -1) {
// 使用toUpperCase()作为替换示例，实际应用中可能是其他处理
replacedStr = str.substring(0, index) + searchWord.toUpperCase() + str.substring(index + searchWord.length);
console.log(replacedStr); // 输出: "The CAT in the hat is black."
}
// 注意：上面的代码只替换了第一个找到的实例。
// 要替换所有实例，需要使用循环和递归或正则表达式等其他方法。3，分割字符串。
虽然indexOf()方法本身不直接用于分割字符串，但是我们可以结合它来找到分割的位置，然后使用slice()等方法来分割字符串。
比如，使用，分割字符串
let str = "apple,banana,cherry";
let fruits = [];
let index = 0;
while ((index = str.indexOf(",", index + 1)) !== -1) {
fruits.push(str.slice(0, index));
str = str.slice(index + 1);
}
fruits.push(str); // 添加最后一个元素，因为循环会在找不到逗号时停止
console.log(fruits); // 输出: ["apple", "banana", "cherry"]
// 注意：上面的代码示例并不高效，因为它在每次迭代时都重新计算了str。
// 更高效的方法是使用split()方法，但这里是为了展示indexOf()的一个应用场景。4,文本解析与数据提取
在处理来自文件，数据库或者网络请求的文本数据的时候，indexOf()方法可以用于解析文件并提取文本所需要的数据，比如我们从JSO格式的字符串中提取除特定的键值对
实例，我们从一个简单的键值对中提取值
let dataStr = "userId=123&name=John";
let searchKey = "name=";
let index = dataStr.indexOf(searchKey);
if (index !== -1) {
let value = dataStr.substring(index + searchKey.length);
// 这里应该进一步处理value以去除可能的&或字符串末尾的其他字符
// 但为了示例，我们直接输出
console.log(value); // 输出: "John&..."（注意：这里只是部分输出，实际应进一步处理）
}
// 注意：上面的代码没有处理完整的场景，比如值后面可能跟着的&或其他字符。
// 在实际应用中，你可能需要使用正则表达式或其他更复杂的逻辑来准确提取值。十一，从尾部开始查找下标索引值 lastIndexOf()
lastIndexOf()使用方法和indexOf使用方法基本一致，主要的区别就是它是从尾部开始匹配的，indexOf则是从头部开始匹配的。
还有一个区别就是，如果第二个参数是负数，他会从倒数开始查找。
let str = "Hello, world! World is beautiful.";
// 查找"world"最后一次出现的位置
let index = str.lastIndexOf("world");
console.log(index); // 输出: 13
// 使用 fromIndex
index = str.lastIndexOf("World", 0); // 不会从0开始向后查找"World"，因为"World"不在前面
console.log(index); // 输出: -1
index = str.lastIndexOf("World", 10); // 在索引10之前查找"World"，但找不到
console.log(index); // 输出: -1
index = str.lastIndexOf("World"); // 不指定fromIndex，搜索整个字符串
console.log(index); // 输出: 7，因为"World"（注意大小写）在索引7处最后一次出现
// 使用负数的fromIndex
index = str.lastIndexOf("o", -4); // 从倒数第四个字符开始向前查找'o'
console.log(index); // 输出: 18，因为从后往前数第四个位置是"beautiful"中的'o'
// 注意：如果fromIndex是负数且其绝对值大于字符串长度，则搜索会回绕到字符串开头
index = str.lastIndexOf("H", -20); // -20的绝对值大于字符串长度，但搜索会回绕
console.log(index); // 输出: 0，因为'H'在索引0处应用场景同indexOf（）差不多，主要用于字符串的提取，分割，索引等
十二，字符串去除空格的方法 trim()
- trim() 用于去除字符串两端的空白字符；
- 这里的空白字符通常是指 空白 制表符\t 换行符\n等不可见的字符；
- 使用trim（）方法之后，字符串两端这些空白字符串会被移除。
- 它只能移动两旁的空白，中间的空白则不会被影响;
- 它返回一个新的字符串，原字符串不会改变.
let str = " Hello, world! ";
let trimmedStr = str.trim();
console.log(trimmedStr); // 输出: "Hello, world!"
console.log(str === trimmedStr); // 输出: false，因为str没有被修改
// 去除字符串两端的换行符和制表符
let strWithWhitespace = "\n\tHello, world!\t\n";
let cleanedStr = strWithWhitespace.trim();
console.log(cleanedStr); // 输出: "Hello, world!"应用场景
1,用户输入处理。
在用户提交表单数据时，trim()方法非常有用，因为用户在输入数据的时候，前后不经意肯可能会添加空格，使用trim()方法可以确保在处理这些数据之前，先去除这些不必要的空格，从而避免这些潜在的问题，尤其是这些数据要和数据库进行交互
2,文本数据清洗
在处理外部源（比如文件，网络api等）获取文本数据时，数据可能包括不必要的空白字符，使用trim()方法可以帮助清洗这些数据，确保后续处理，比如数据分析，数据存储的准确性。
3，日志文件的处理
在分析和处理日志文件时，日志文件条目可能会包含额外的空格或者制表符，这些字符可能会影响日志解析的准确性，trim()方法可以帮助去除这些不必要的字符，使日志条目更加整洁和易于处理。
4，字符串的比较
在比较字符串之前，使用trim()方法可以确保比较的准确性，因为即使两个字符串在视觉上看起来相同，或许前后还有不可见的空格，如果不先去除这些空格，直接比较可能得到不正确的结果。
5，文本分割与拼接
在将文本分割成多个部分或者拼接多个部分的时候，trim()方法可以帮助确保分割或者拼接的结果不会收到原始字符串两端空白字符的影响
// 假设这是用户提交的表单数据
let userName = " Alice ";
// 使用trim()方法去除两端的空格
userName = userName.trim();
// 现在可以安全地处理userName，无需担心额外的空格
console.log(userName); // 输出: "Alice"
// 假设我们有一个函数来检查用户名是否已存在
function checkUsernameExists(username) {
// 这里可以调用数据库查询或其他逻辑来检查用户名
// ...
// 假设返回true表示用户名已存在
return false; // 仅为示例
}
// 检查并处理用户名
if (checkUsernameExists(userName)) {
console.log("用户名已存在！");
} else {
console.log("用户名可用。");
}十三，字符串的大小写函数 toLowerCase() 和toUpperCase()
在javascript中，字符串对象提供了toLowerCase()和toUpperCase()两个实用的方法，用于改变字符串中字符的大小写。
- toLowerCase（） 用于把所有字符串转为小写字符串；
- toUpperCsse（）用于把所有字符串转为小写字符串；
- 这两个方法，都不会改变原来的字符串；
- 这2个方法没有参数。
- 如果字符串中包含了 如数字，标点符号，空格等，这些字符将保持不变；
let str = "Hello, World!";
let lowerStr = str.toLowerCase();
console.log(lowerStr); // 输出: "hello, world!"
console.log(str === lowerStr); // 输出: false，因为原字符串没有被修改
let str = "Hello, World!";
let upperStr = str.toUpperCase();
console.log(upperStr); // 输出: "HELLO, WORLD!"
console.log(str === upperStr); // 输出: false，因为原字符串没有被修改应用场景
- 用户输入处理
- 字符串的比较
- URL路径处理
- 日志记录
- 数据清洗
- 编程约定
- 数据展示
// 用户输入处理示例
let userInput = "Hello, World!";
let lowerCaseInput = userInput.toLowerCase();
console.log(lowerCaseInput); // 输出: "hello, world!"
// 字符串比较示例
let str1 = "Hello";
let str2 = "hello";
if (str1.toLowerCase() === str2.toLowerCase()) {
console.log("字符串相等（忽略大小写）");
} else {
console.log("字符串不相等");
}
// URL处理示例（简化）
let urlPart = "ExamplePage";
let normalizedUrlPart = urlPart.toLowerCase();
// 假设normalizedUrlPart将用于构建或解析URL
// 数据展示示例（假设）
let textToDisplay = "IMPORTANT MESSAGE";
let displayText = textToDisplay.toUpperCase();
// 假设displayText将用于页面上的某个元素，并通过CSS样式进行加粗显示十四，字符串搜索方法 search()
search()方法用于在字符串搜索，与正则表达式相匹配的结果，并返回第一个匹配项的索引，如果没有找到匹配项，则返回-1
- 参数是正则表达式
- 返回的结果是搜索到的串的第一个下标索引值；
- 如果没有找到匹配先，则返回-1
let str = "Hello, world!";
let index = str.search(/world/);
console.log(index); // 输出: 7
// 如果没有找到匹配项
let noMatchIndex = str.search(/foo/);
console.log(noMatchIndex); // 输出: -1应用场景
- 验证表单输入内容
- 文本编辑器功能，在开发富文本编辑器中，可以实用这个函数快速找到搜索词；
- 数据处理
- 路由匹配
- 搜索引擎功能
- 参数是正则表达式，正则有多灵活，这个方法就有多灵活
验证用户输入示例：
function validateEmail(email) {
return email.search("@") !== -1;
}
function validatePassword(password) {
return password.search(/\d/) !== -1; // \d 匹配任何数字
}数据处理示例
let data = "id:123,name:John Doe,age:30";
let index = data.search(/id:(\d+)/); // 查找 id 后面的数字
if (index !== -1) {
let id = data.substring(index + 3, data.indexOf(',', index));
console.log(id); // 输出: 123
}十五，字符串的重复函数 repeat()
repeat()方法用于创建一个新的字符串。改字符串包含被调用字符串的指定参数，连接在一起
- 有1个参数，参数是指定重复次数；
- 返回一个新的字符串，按照次数和原来字符串拼接成一个字符串。
- 如果参数是0，这回返回空字符串
- 如果参数是无穷的数值，则会抛出异常错误
let str = 'abc';
let repeatedStr = str.repeat(3);
console.log(repeatedStr); // 输出: abcabcabc
let emptyStr = str.repeat(0);
console.log(emptyStr); // 输出: （空字符串）
let tooMany = str.repeat(Infinity); // 这会抛出 RangeError
// try {
// let tooMany = str.repeat(Infinity);
// } catch (e) {
// console.log(e.name); // RangeError
// }十六，字符串的替换函数 replace()
如果想替换字符串，使用replace()方法，十分管用
- 里面又2个参数，第一个参数是要被替换的串，第二个参数是新的串；
- 返回的结果会生成一个新的字符串，不会改变原来的字符串；
- 默认只会替换文本中的第一个；
- 可以用正则，后面添加一个g 则标志替换匹配所有匹配项
let str = 'Hello, world!';
let newStr = str.replace('world', 'JavaScript');
console.log(newStr); // 输出: Hello, JavaScript!
// 使用全局标志替换所有匹配项
let globalStr = 'apple, banana, cherry';
let globalNewStr = globalStr.replace(/apple/g, 'orange');
console.log(globalNewStr); // 输出: orange, banana, cherry应用场景
- 去除字符串中的特定字符。
- 格式化字符串
- 文本替换与编辑
- 数据清洗与预处理
- URL替换与重写
- 敏感信息脱敏
去除特定字符串案例：
let str = "Hello, world!!!";
let cleanStr = str.replace(/!/g, '');
console.log(cleanStr); // 输出: "Hello, world"格式化案例：
let message = "Hello, {name}! Today is {date}.";
let name = "Alice";
let date = "March 15, 2023";
let formattedMessage = message.replace("{name}", name).replace("{date}", date);
console.log(formattedMessage); // 输出: "Hello, Alice! Today is March 15, 2023."数据清洗与处理
let data = " 123, 456, 789 ";
let cleanData = data.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ',');
console.log(cleanData); // 输出: "123,456,789"敏感词脱敏
let userInfo = "Name: John Doe, Password: 123456";
let sanitizedInfo = userInfo.replace(/Password: \S+/, 'Password: *****');
console.log(sanitizedInfo); // 输出: "Name: John Doe, Password: *****"十七，字符串分割方法 split()
- 可以传入参数，按照传入的参数分割字符串；
- 分割的字符串是一个数组；
- 如果参数不填写，则数组只有一个成员，就是原字符串；
- 如果传入'' 空字符串，那么就会按照每一个字符串进行分割；
- 第二个参数可选参数，限定返回数组的最大成员数。
<script>
var st='hi word nihao'
console.log(st.split(' ')) //执行以那个字符为切割['hi', 'word', 'nihao']
console.log(st.split("")) //如果不指定 则全部切割一下 变['h', 'i', ' ', 'w', 'o', 'r', 'd', ' ', 'n', 'i', 'h', 'a', 'o']
console.log(st.split(' ',2)) //返回前面2个成员 1就是返回前面1个成员 ['hi', 'word']
var str1='1234'
var str2 = '1，2，3，4'
console.log(str1.split())//['1234']
console.log(str1.split('')) //['1', '2', '3', '4'] 加个冒号 则每一个都是单独的一个
console.log(str1.split('', 2)) //['1', '2'] 干掉后面的2给数据
console.log(str2.split('，')) //['1', '2', '3', '4'] 以指定字符为分割
</script>应用场景
1,使用字符串作为分割符号分割字符串。
let fruits = "Apple,Banana,Cherry";
let fruitsArray = fruits.split(",");
console.log(fruitsArray); // 输出: ["Apple", "Banana", "Cherry"]2，使用正则表达式，分割字符串
let dateString = "2023-03-15";
let dateArray = dateString.split(/-/);
console.log(dateArray); // 输出: ["2023", "03", "15"]
// 使用正则表达式分割包含多个空格的字符串
let text = "Hello world!";
let words = text.split(/\s+/);
console.log(words); // 输出: ["Hello", "world!"]3，限定分割的结果，决定数组的长度
let numbers = "1,2,3,4,5";
let firstTwoNumbers = numbers.split(",", 2);
console.log(firstTwoNumbers); // 输出: ["1", "2"]
// 使用负数 limit
let parts = "a,b,c,d,e".split(",", -1);
// 注意：在大多数环境中，负数 limit 的行为可能不被定义或不被支持，这里仅作为示例
// 如果支持，它可能会返回除了最后几个元素之外的所有元素4,以转义符分割 比如换行符
let lines = "Line 1\nLine 2\nLine 3";
let linesArray = lines.split("\n");
console.log(linesArray); // 输出: ["Line 1", "Line 2", "Line 3"]本篇主要是列举了一些常用的字符串方法，和关于他们的应用场景案例。
总结最常用的：
- 字符串的替换 replace()
- 字符串的索引下标 charAt()
- 字符串的查找 indexOf(),lastindexOf()
- 字符串的拼接 concat()
- 字符串的转换 toLowerCase(),toUpperCase()
- 字符串的重复 repeat()
- 字符串的截取 slice(),substr(),substring()
- 字符串的搜索 search()
十八，思维导图
1，字符串的定义，转义，转码，属性(长度length)
2，字符串的下标(charAt)，拼接(concat)，截取(slice,substring,substr)
3，字符串的查找(indexOf,lastIndexOf)，去除空格(trim)，大小写(toLwerCase,toUpperCase)
4，字符串的搜索(search)，重复(repeat)，替换(replace)
5，字符串的切割 (split)
6，字符串的方法的应用场景
- 学习：知识的初次邂逅
- 复习：知识的温故知新
- 谢谢观看~
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
