在JS中所有用单引号或者双引号包起来的都是字符串,每个字符串都是有零到多个字符组成。
上一篇《JS数组中常用方法》介绍了数组中的常方法,可以与字符串中的方法进行对比
关于字符串中常用的方法
字符串是基本数据类型,字符串的每次操作都是对值的直接进行操作,和数组不一样,数组是基于空间地址来操作的,所以不存在原有字符串是否改变的说法,肯定都是不变的。
charAt/charCodeAt
作用:charCodeAt不仅仅获取字符,它获取的是字符对应 的Unicode编码值(ASC II码值)
参数:索引
返回:字符或者对应的编码
var str = "xiaoKge_2";
console.log(str.charAt(0)); //'x' 获取索引为0的字符
通过charAt获取和直接操作索引方式获取的区别:
- 当索引不存在的时候,str[x]获得的结果是undefined,运行的机制和对象是一样的,而charAt(x)获取的结果是空字符串。
charCodeAt返回的是字符串对应的编码
fromCharCode返回的是编码对应的字符
console.log(str.charCodeAt(0)); //120
//返回的是字符对应的编码
console.log(String.fromCharCode(120)); //'x'
slice
作用: str.slice(n,m) 从索引n开始找到索引为m处(不包含m),把找到的字符当做新字符串返回。
和数组中的slice操作是一样的:不写m是查找到字符串的末尾,n/m都不写是字符串的克隆,,支持负数索引,用字符串的总长度+负数索引做运算。
var str = "xiaoKge_2";
console.log(str.slice(2,7));//aoKge
console.log(str.slice()); //xiaoKge_2
console.log(str.slice(-3,-1)); //e_
substring
和slice语法一模一样,唯一的区别在于:slice支持负数索引,而substring不支持负数索引。
substr
字符串截取的方法,用法是:str.substr(n,m),从索引n开始截取m个字符。
var str = "xiaoKge_2";
console.log(str.substr(2,5)); //aoKge
console.log(str.substr(2)); //aoKge_2
console.log(str.substr(-3,1)); //e
split
和数组中的join相对应,数组中的join是把数组一项按照指定的连接符变为字符串,而split是把字符串按照指定的分隔符,拆分成数组中每一项。
var ary = [12,13,14];
var str = ary.join("+");
console.log(str); //12+13+14
console.log(str.split('+')); // ["12", "13", "14"]
replace
作用:替换字符串中的原有字符
参数:原有字符,要替换的新字符
返回值:返回替换后的字符串
var str = "xiaoKge_2";
console.log(str.replace('xiao','小'));//小Kge_2xiao
在不适用正则的情况下,每执行一次只能替换最前的的一个。
console.log(str.replace(/xiao/g,'小')); //小Kge_2小
项目中的需求案例
1.时间字符串格式化
有一个时间字符串 “2018-4-4 16:26:8” ,我们想 基于这个字符串获取到 “04月04日 16时26分”
//04月04日 16时26分
var str = "2018-4-4 16:26:8";
var ary = str.split(' '); //["2018-4-4", "16:26:8"]
var aryLeft = ary[0].split('-');
var aryRight = ary[1].split(':');
var month = addZero(aryLeft[1]);
var day = addZero(aryLeft[2]);
var hour = addZero(aryRight[0]);
var minute = addZero(aryRight[1]);
var result = month + '月' + day + '日' + ' ' + hour + '时' + minute + '分';
console.log(result); //04月4日 16时26分
function addZero(val) {
return val < 10 ? '0' + val : val;
}
2. URL地址问号传参解析
有一个URL地 址“http://www.zhufengpeixun.cn/stu/? lx=1&name=AA&sex=man”
地址问号后面的内 容是我们需要解析出来的参数信息
{
lx:1,
name:’AA’,
sex:’man’
}
// 获取“?” 和 “#”字符所在的位置
var indexASK = str.indexOf('?'),
indexWELL = str.indexOf('#');
//但是#号可能没有
if(indexWELL > -1) {
//存在#号,获取到#号位置
str = str.substring(indexASK+1,indexWELL);
console.log(str);
}else {
//不存在#号,就直接获取到字符串末尾
str = str.substring(indexASK + 1); //不指定第二个参数就直接获取到字符串末尾
// 或者使用subStr() 和上面的区别是第二个参数是个数不是位置
// str = str.substr(indexASK+1);
console.log(str);
}
var ary = str.split('&');
//定义一个对象来存
var obj = {};
console.log(ary); //["lx=1", "name=AA", "sex=man"]
for(var i=0;i<ary.length;i++) {
var itemAry = ary[i].split('=');
var key = itemAry[0];
var value = itemAry[1];
obj[key] = value;
}
console.log(obj); //{lx: "1", name: "AA", sex: "man"}
字符串位置方法
indexof() 和 lastIndexOf()
这两个方法都是从一个字符串搜索给定的子字符串,然后返回子字符串的位置(如果没有找到子字符串,则返回-1)。
这两个方法的区别在于:indexOf()方法从字符串的开头向后搜索子字符串,而lastIndexOf() 方法是从字符串的末尾向前搜索子字符串。
var stringValue = "hello world";
console.log(stringValue.indexOf('o')); //4
console.log(stringValue.lastIndexOf('o')); //7
字符串‘o’ 第一次出现的位置是4,也就是hello的"o",最后一次出现的位置是7,也就是world的"o"。如果“o” 在这个字符串中只出现一次,那么indexOf和lastIndexOf()会返回相同的位置值。
indexOf() 会从该参数指定的位置向后搜索,忽略该位置字符串之前的所有字符;而lastIndexOf() 则会从指定位置向前搜索,忽略该位置之后的所有字符。
console.log(stringValue.indexOf('o',6)); //7
console.log(stringValue.lastIndexOf('o',6)); //4
trim
ECMAScript5为所有字符串定义了trim()方法,这个方法会创建一个字符串的副本,删除权值和后缀的所有空格。然后返回结果。
var str = " hello world ";
console.log(str.trim());
// "hello world"