字符串详解
一、字符串概述
1.字符串
描述:由单引号或者双引号包裹起来的,零个或多个排列在一起的字符构成的结构
注意:
(1)字符串在定义的时候,不要使用容易引起歧义的内容
(2)由于JSON解析中规定字符串采用单引号定义,因此统一规定定义字符串时采用单引号。
补充:
字符串提供了一些特殊字符用来替代,在字符串中容易引起歧义的字符
(1) \' 代表 '
(2) \" 代表 "
例子:
var introduceWord1 = 'my name is \'frank\'.';
var introduceWord2 = "my name is \"frank\".";
console.log(introduceWord1);
console.log(introduceWord2);
扩展:
(1)字符串必须在一行之内定义,不能分成多行。
如果必须分成多行定义,可以采用【在一行末尾添加\反斜线】作为连接符
var str1 = 'hello\
world!\
goodbye\
world!';
console.log(str1);
(2)实际上还能够通过“+”加号作为连接符,分成多行定义字符串。
var str2 = 'hello ' +
'world!' +
' goodBye' +
' world!';
console.log(str2);
二、字符串长度
1.length属性:
描述:length属性能够返回一个数字类型的结果,表示字符串的长度,也就是字符串包含的字符个数
语法:字符串变量.length
例子:
var str = 'frank';
console.log(str.length);
console.log(typeof str.length);
案例:
【判断账户名长度】
var userNameInput = document.getElementById('userName');
var loginBtn = document.getElementById('login');
loginBtn.onclick = function () {
var userName = userNameInput.value;
if(userName.length>=6&&userName.length<=18){
console.log('登录成功');
}else if(userName.length<6){
console.log('用户名不得小于6位');
}else{
console.log('用户名不得超过18位');
}
};
2.[]字符索引
描述:能够根据指定的下标获取字符串中的字符。
语法:字符串变量[下标]
注意:
(1)下标:字符串中每一个字符自带的序号,下标从0开始,最后一个是length-1
(2)索引一次只能获得一个字符,不能一次获得多个字符
例子:
var str3 = 'xiaoMingTongXue';
var resultStr = '';
for(var i=4; i<8; i++){
resultStr+=str3[i];
//resultStr+=str3.charAt(i);
}
console.log(resultStr);
3.charAt()方法
描述:能够根据指定的下标获取字符串中的字符,作用等同于[]字符索引
语法:字符串变量.charAt(下标)
4.charCodeAt()方法
描述:能够根据指定的下标获取字符串中字符对应的UniCode编码。
语法:字符串变量.charCodeAt(下标)
注意:
(1)A--65、a--97需要记住的UniCode编码
(2)如果参数是负数或超过字符串长度,则本方法返回NAN
案例:
【判断首位是字母】
var userNameInput = document.getElementById('userName');
var loginBtn = document.getElementById('login');
loginBtn.onclick = function () {
var userName = userNameInput.value;
//先获取首位字符编码
var firstCode = userName.charCodeAt(0);
//只要判断编码在字母范围内,就是,否则就不是
if((firstCode>=65&&firstCode<=90)||(firstCode>=97&&firstCode<=122)){
console.log('登录成功');
}else{
console.log('首位不是字母,内容不合法');
}
};
5.concat()方法
描述:concat()方法用于拼接多个字符串
语法:字符串变量1.concat(字符串变量2,字符串变量3,...)
例子:
var str1 = 'hello';
var str2 = 'world';
var str3 = 'frank';
var result = str1.concat(str2,str3);
console.log(result);
三、转义字符&字符串对象
1.转义字符
描述:转义字符是\反斜线,配合一些字符能够组成带有特殊含义的符号,
用来避免字符串定义的时候出现混淆
类型:\'(表示') \"(表示") \\(表示\) \n(换行) \r(回车)
例子:
var str = 'D:\\英语学习资料\\';
console.log(str);
var str1 = 'hello \n world!';
console.log(str1);
2.字符串对象
描述:字符串除了用单双引号定义之外,还能够通过new命令创建
语法:var strObj = new String('字符串内容');
说明:
(1)通过new创建的字符串,并不是string类型,而是object类型
(2)创建字符串对象后,肯能会造成内存部分的问题。
例子:
var str = 'hello';
console.log(str);
console.log(typeof str);
var strObj = new String('hello');
console.log(strObj);
console.log(typeof strObj);
四、字符串截取
1.subString()
描述:表示从参数一下标开始截取,到参数二下标为止之间的字符串。不包括参数二下标的字符
语法:str.subString(fromIndex,toIndex);
注意:subString()方法的两个参数可以互相调换位置,对结果没有影响。
例子:
var str = 'welcome 19big victor zhaokai';
//var result = str.substring(8,13);
var result = str.substring(13,8);
console.log(result);
2.subStr()
描述:表示从参数一下标开始截取,截取参数二长度的内容
语法:str.subStr(fromIndex,strLength);
注意:subStr()方法的两个参数不能互换位置
例子:
var str = 'welcome 19big victor zhaokai';
var result = str.substr(8,13);
console.log(result);
3.slice()
描述:表示从参数一下标开始截取,到参数二下标为止之间的字符串。不包括参数二下标的字符
语法:str.slice(fromIndex,toIndex);
注意:本方法两个参数不能互换位置,并且后一个参数必须大于前一个参数
【如果后一个参数小于前一个参数,则返回一个空字符串''】
例子:
var str = 'frank';
var subStr1 = str.slice(1,4);
console.log(subStr1.length);
3.5补充:以上三个截取的方法都不会对原字符串造成影响。
4.小技巧:
如果以上三个方法在截取字符串的时候,只写第一个参数。
那么表示从参数下标开始,一直截取到字符串末尾。
例子:
var str = 'here is a string';
var subStr1 = str.slice(5);
var subStr2 = str.substring(5);
var subStr3 = str.substr(5);
console.log(subStr1);
console.log(subStr2);
console.log(subStr3);
五、字符串查找
1.indexOf()字符串查找
描述:在已知的字符串中,查找【目标字符串】第一次出现的下标。没有找到返回-1
语法:str.indexOf(目标字符串,fromIndex);
注意:第一个参数是必要参数,第二个参数是可选参数。如果不写默认从下标为0开始查找。
例子:
var str = 'abcde';
var index = str.indexOf('bc');
console.log(index);
2.lastIndexOf()字符串查找
描述:在已知的字符串中,查找【目标字符串】最后一次出现的下标。没有找到返回-1
语法:str.lastIndexOf(目标字符串,toIndex);
注意:第一个参数是必要参数,第二个参数是可选参数。如果不写默认查找到结尾为止。
例子:
var str = 'xiaoMingTongXue';
var lastIndex = str.lastIndexOf('i',3);//第二个参数表示找到哪个下标停止
console.log(lastIndex);
六、字符串替换
1.replace()
描述:将字符串中第一个出现的原字符串,替换为目标字符串。
如果没有找到,则将字符串复制一份返回
语法:str.replace(oldStr,newStr);
注意:replace()方法尽管被称为替换,但不会对原字符串造成任何影响。
例子:
//1.要求将字符串中第一个frank,替换成(XXX)
var str = 'hello frank! goodbye frank!';
var newStr = str.replace('frank','(XXX)');
console.log(newStr);
console.log(str);
七、字符串其他操作方法
1.trim()
描述:去掉字符串两端多余的空格
语法:str.trim();
注意:
(1)小括号必须写,尽管小括号里面不需要写内容
(2)去掉空格是指字符串两端的空格,对字符串内部的空格无影响
(3)不会对原字符串造成影响
例子:
var str = ' hello world goodbye world ! ';
console.log(str.trim());
console.log(str);
2.toUpperCase()、toLowerCase()
描述:将字符串中的英文字母转换成大写、小写
语法:str.toUpperCase()、str.toLowerCase()
注意:不会对原字符串造成影响
例子:
var str = 'Hello World!';
console.log(str.toUpperCase());
console.log(str.toLowerCase());
console.log(str);
3.match()
描述:方法用来在字符串中查找目标字符串第一次出现的信息,如果没找到返回null
语法:str.match(目标字符串)
例子:
var str = 'hello frank! goodBye frank!';
var info = str.match('frank');
console.log(info);
4.search()
描述:方法用来在字符串中查找目标字符串第一次出现的下标,如果没有找到返回-1
语法:str.search(目标字符串)
例子:
var str = 'hello frank! goodBye frank!';
var result = str.search('franky');
console.log(result);
5.split()
描述:split方法能够根据指定的符号将字符串进行分割,分割后的每一个子元素整合成一个数组返回。如果无法分割,那么返回的数组只有一个元素,这个元素就是字符串本身。
语法:str.split(symbol);
例子:
var string = 'good bye everyone.';
string.split(' ') ;//["good", "bye", "everyone"]
ps:split方法最后会返回一个数组。
ps:分割的符号不同,得到的结果也不同。
八、拓展
只能解析非中文代码
btoa():字符串或二进制值转为Base64编码 (加密)
atob():Base64编码转为原来的编码 (解密)
加密解密中文文字
encodeURLComponent() (加密)
decodeURLComponent() (解密)