JS中字符串常用函数
charAt、 charCodeAt
- 输出指定位置的字符；
charAt: 根据索引获取指定位置的字符，和str[i]的作用一样
harCodeAt: 获取指定索引位置对应字符的ASCII码值
@params: n, 获取指定字符的索引
@return: 返回查找到的字符；
找不到charAt返回空字符串而非undefined，charCodeAt返回NaN。
let str = 'HappyEveryDay';
console.log(str.charAt(0)); // 'H'
console.log(str[0]); // 'H'
console.log(str.charAt(1000)); // ''
console.log(str.charCodeAt(0)); //72
console.log(str.charCodeAt(1000)); //NaN
console.log(String.fromCharCode(72)); //'H', 从ASCII码转为字符substr、substring、slice
- 字符串的截取：
substr(n,m):从索引n开始，截取m个字符，m不写，截取到末尾, 不影响原来的字符串。
substring(n,m): 从索引n开始，截取到索引m，不包括m。[n,m)，不影响原来的字符串
slice(n,m): 和substring一样，只不过slice 可以支持负数（可以倒数）,其余两个方法不可以，不影响原来的字符串。
let str = 'HappyEveryDay';
let str1 = str.substr(5, 5);
console.log(str, str1); //HappyEveryDay Every
str1 = str.substring(5, 10);
console.log(str1); //Every
str1 = str.slice(-8, -3);
console.log(str.length); //可以用length+索引， 即 13-8=5,13-3=10, 和第二种方法一致。
console.log(str1); //从倒数第八个字符开始， 取到倒数第三个。 [-8,-3). Every。indexOf、lastIndexOf、includes
3. 查找字符串中是否包含某个字符或某个整体字符串。
indexOf：
@params: (str,m), 从索引m开始查找，是否含有str字符或整体字符串的第一个索引位置；
@return：返回找到的第一个索引值, 找不到返回-1
lastIndexOf:
@params: (str,m), 从索引m开始查找，是否含有str字符或整体字符串的最后一个索引位置；
@return：返回找到的最后一个索引值, 找不到返回-1
includes :
@params:str, 查找当前字符串中是否含有某个str；
@return: 如果有，返回true， 否则返回falselet str = 'HappyEveryDay';
let n = str.indexOf('a');
let m = str.indexOf('Day');
let x = str.indexOf('*');
console.log(n, m, x); //1 10 -1
let n1 = str.lastIndexOf('a');
let m1 = str.lastIndexOf('Day');
let x1 = str.lastIndexOf('*');
console.log(n1, m1, x1); //11 10 -1
let con = str.includes('*');
console.log(con); //false
con = str.includes('Day');
console.log(con); //truetoUpperCase、toLowerCase
- 大小写转换
toUpperCase:
* @params:无；
* @return: 返回大写的字符串, 不影响原来的字符串
toLowerCase:
let str = 'HappyEveryDay';
let str1 = str.toUpperCase();
console.log(str, str1); //HappyEveryDay HAPPYEVERYDAY
let str2 = str.toLowerCase();
console.log(str, str2); //HappyEveryDay happyeveryday
// 仅字符串首字母大写
str = str.slice(0, 1).toUpperCase() + str.slice(1).toLowerCase();
console.log(str); //Happyeverydaysplit
split([分隔符])： 把字符串按照指定的分隔符拆分成数组（和数组中的join对应，
join是把数组按照指定的连接符连接成字符串）
* split 支持传递正则表达式let str = 'Music|Movie|Song|Sport';
let hobbyAry=str.split('|');
console.log(hobbyAry);// ["Music","Movie","Song","Sport"]
str = hobbyAry.join(',');// 数组以逗号连接， 也可以直接toString()
console.log(str); //"Music,Movie,Song,Sport"replace
6.replace(老字符，新字符)：实现字符串的替换（经常伴随正则表达式使用）。
在不使用正则表达式时，每次调用replace只能替换一次。
let str = 'Music|Movie|Song|Sport';
let str1=str.replace('|','&');
console.log(str1); //Music&Movie|Song|Sport, 发现只替换了一个|， 其他仍为|
// 使用正则可以实现全局替换（类似于word中，替换有两个选择，一个是单独替换，一个是全量替换）
let strReg = 'Music|Movie|Song|Sport';
let str1Reg=strReg.replace(/@/g,'&');// /@/g, g代表全局的意思，// 中的@ 表示要查找的字符为@
console.log(str1Reg); //Music|Movie|Song|Sport练习1： 将时间转为指定格式：
// 练习： 时间格式转换
/* 给定一个时间，将其转换为：
"2022年08月31日 09时17分23秒"
"2022年08月31日"
"08/31 09:17"
*/
let time = '2022-8-31 9:17:23';
// 先将年月日和时分秒分组
let date = time.split(' ');
console.log(date); // ['2022-8-31', '9:17:23']
// 将第一个数组元素中的- 做切分
let dateDetail=date[0].split('-');
console.log(dateDetail); //['2022', '8', '31']
let hourDetail=date[1].split(':');
console.log(hourDetail);//['9', '17', '23']
// 使用箭头函数补0
let addZero=param=>{
if(param.length<2) {
return param='0'+param;
}
}
dateDetail[1]=addZero(dateDetail[1]);
console.log(dateDetail[1]);
hourDetail[0]=addZero(hourDetail[0]);
console.log(hourDetail[0]);
time=dateDetail[0]+'年'+ dateDetail[1] +'月'+dateDetail[2]+'日'+hourDetail[0]+'时'+hourDetail[1]+'分'+hourDetail[2]+'秒';
console.log(time); //2022年08月31日09时17分23秒注：
let date = time.split(' ');
console.log(date); // ['2022-8-31', '9:17:23']
// 将第一个数组元素中的- 做切分
let dateDetail=date[0].split('-');
console.log(dateDetail); //['2022', '8', '31']
let hourDetail=date[1].split(':');
console.log(hourDetail);//['9', '17', '23']这三个split 可以直接用一个正则搞定：
let ary = time.split(/(?: |-|:)/g);练习二： queryURLParams：
function queryURLParams(url){
// let url = 'https://www.bilibili.com/video/BV1rg411D7nQ?spm_id_from=333.1007.0.0&vd_source=b5105a99a0628dd90#box';
// 将？号后的值以键值对的形式存储， # 单独存储，键为HASH。
// 1. 获取? # 的索引值
let questionInd=url.indexOf('?');
let wellInd=url.indexOf('#');
// 2. 用substring分别获取两个包含想要内容的字串，左开右闭；
let questionStr = url.substring(questionInd+1,wellInd);
let wellStr=url.substring(wellInd+1);
// console.log(questionStr,wellStr); // spm_id_from=333.1007.0.0&vd_source=b5105a99a0628dd90 box
let questionStrArr = questionStr.split('&');
let obj = {};
//console.log(questionStrArr); // ['spm_id_from=333.1007.0.0', 'vd_source=b5105a99a0628dd90']
questionStrArr.forEach((item)=>{
arr=item.split('=');
let key=arr[0];
let value =arr[1];
obj[key]=value;
});
obj['HASH']=wellStr;
return obj;
}
let url = 'https://www.bilibili.com/video/BV1rg411D7nQ?spm_id_from=333.1007.0.0&vd_source=b5105a99a0628dd90#box';
console.log(queryURLParams(url));练习三： 简易验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易验证码生成</title>
</head>
<body>
<input type="text" width="100px" id="inp"/>
<br/>
<span width="100px" id='content'></span>
<button width="100px" id = 'btn'>看不清，换一张</button>
<script>
let inp = document.getElementById("inp");
let content = document.getElementById("content");
let btn =document.getElementById('btn');
let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
function verification(){
let res='';
for (let i = 0; i <4; i ++){
// 下标从0-61
res+=str[Math.round(Math.random()*(61-1+1))];
}
content.innerHTML=res;
};
// 第一次加载页面执行方法。
verification();
// 点击按钮，需要重新执行方法。将方法给onclick, 方法名不需要加（）表示函数定义，() 表示方法执行。
btn.onclick=verification;
// input 输入框中输入后，移开鼠标（onblur 事件）校验内容是否正确(表单使用value，非表单元素使用innerHTML)
inp.onblur=function(){
if(inp.value.toLowerCase()===content.innerHTML.toLowerCase()){
alert("校验成功");
}else
{
alert("校验失败，请重新输入！");
// 清空输入框
inp.value='';
verification();
}
}
</script>
</body>
</html>注：
**表单元素：表单form下可以使用的标签（JQUERY中取值赋值使用：val()，对应JS中value）
文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域()、（按钮）等
** 非表单元素：（jQuery中取值赋值使用 html()和text(),对应JS中innerHTML和innerText）
div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
