随笔记录--JS中字符串常用的方法

在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"

猜你喜欢

转载自blog.csdn.net/qq_34207992/article/details/107687024