Yapei Li

专注于前端领域

0%

js基础8、JS中`字符串`操作

发表于 分类于
本文字数： 6.1k 阅读时长 ≈ 6 分钟

字符串是基本数据类型的，字符串的每一次操作都是直接的对值进行操作，不像数组是基于空间地址来操作的，所以不存在原有字符串是否改变的问题，肯定都是不变的

在JS中所有用单引号或者双引号包起来的都是字符串，每一个字符串都由0到多个字符组成

字符串中的每一个字符都有一个自己对应的位置的索引，也有类似于数组一样的length代表自己的长度

1
2
3
4
5
6
7
var str='abcdefghijk'

str.length   => 字符串长度
str[0]   =>   'a'
str[str.length-1]   => 字符串最后一个字符
str[100]  =>  undefined

charAt/charCodeAt

作用：charAt 根据索引获取指定位置的字符，charCodeAt不是获取索引对应的字符，它获取的是索引对应的字符的Unicode编码值（ASC II码值）

参数：索引

返回值：字符或者对应的编码

和直接操作索引方式获取的区别：

当索引不存在的时候，str[x] 获取的结果是undefined，运行机制和对象是一样的，而charAt(x)获取的结果是空字符串

通过编码返回原有字符：String.fromCharCode(108) => 'l'

1
2
3
4
5
6
7
var str='liyapei';
console.log(str.charAt(0))      //'l'
str[0]                          //'l'
console.log(str.charAt(10))    // ''
str[10]                         //undefined

str.charCodeAt(0)        //'l' 对应的Unicode编码值（十进制） 108

indexOf / lastIndexOf

这两个方法不支持IE低版本浏览器（IE6,7,8）

作用：检测当前值在字符串中第一次或者最后一次出现位置的索引，有这个字符，返回大于等于0的索引，如果没有返回-1，基于这两个方法可以验证当前字符串中是否包含某一个字符

参数：要检测的值

返回值：索引

slice 查找

作用：str.slice(n,m) 从索引n开始找到索引为m处（包含n不包含m），把找到的字符当做新字符串返回

  • 1、和数组的slice操作是一样的
  • 2、不写m是查找到字符串的末尾
  • 3、n/m 都不写是字符串的克隆
  • 4、支持负数索引；用字符串的总长度+负数索引做运算
1
2
3
4
5
var str = 'liyapeiaixuexi'
str.slice(2,7)  //'yapei'
str.slice(2)    //'yapeiaixuexi'
str.slice()     //'liyapeiaixuexi'
str.slice(-3,-1)    //'ex'

substring

和slice语法完全一模一样；

唯一的区别 ：slice支持负数索引，而substring不支持负数索引

负数索引返回 空字符串

1
2
3
4
5
var str = 'liyapeiaixuexi'
str.slice(2,7)  //'yapei'
str.substring(2,7)  //'yapei'
str.slice(-3,-1)    //'ex'
str.substring(-3,-1)    //''

substr

是字符串截取方法，（类似于arr.splice）

用法是：str.substr(n,m)，从索引n开始（包含n）截取m个字符

第二个参数不传截取到末尾

支持第一个参数（n）为负数（第二个参数m不能为负），负数是总长度+负数索引做运算

1
2
3
4
5
var str = 'liyapeiaixuexi'
str.substr(2,7)  //'yapeiai'
str.substr(2)  //'yapeiaixuexi'
str.substr(-3,1)  //'e'
str.substr(-6,3)  //'ixu'

toUpperCase/toLowerCase

实现字母的大小写转换，toUpperCase小写转大写；toLowerCase大写转小写

1
2
3
var str = 'LiYaPei'
str.toUpperCase() //LIYAPEI
str.toLowerCase() //liyapei

split拼接

和数组中的join相对应，数组中的join是把数组的每一项按照指定连接字符链接为字符串，而split是把字符串按照指定的 分隔符 ，拆分成数组中每一项

1
2
let str = '1+2+3'
str.split('+')  // [1,2,3]

replace(要替换的，要替换为的)

作用：替换字符串中的原有字符

参数：原有字符，要替换的字符

返回值：替换后的字符串

原有字符出现多次时，不用正则的情况下只能替换第一个找到的原有字符

1
2
3
4
5
//=>把'liyape'替换为'李亚培'
var str='liyapei666liyapei168' ;
str=str.replace('liyapei','李亚培');  => '李亚培666liyapei168'  //第二个没替换

str.replace(/'liyapei'/g,'李亚培')； =>  '李亚培666李亚培168'

还有很多：

  • includes
  • localeCompare
  • search
  • trim
  • ….

真实项目中的需求

时间字符串格式化

‘2018-4-4 16:32:8’ -> ‘04月04日 32时26分’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//补零函数
function addZero(val){
    return val<10?month='0'+val:val;
}

var str='2018-4-4  16:32:8';

var arr=str.split(' ')   //=>  ['2018-4-4','16:32:8']  
var arrLeft=arr[0].split('-')   //=>  ['2018','4','4']
var arrRight=arr[1].split(':')  //=>  ['16','32','8']

var month =addZero(arrLeft[1]);
var day=addZero(arrLeft[2]);
var hour=addZero(arrRight[0]);
var minute=addZero(arrRight[1]);

var res=month +'月'+day+'日'+hour+'时'+minute+'分'

时间字符串处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
~function（pro）{
    pro.formatTime=function(template){
        template = template || '{0}年{1}月{2}日 {3}时{4}分{5}秒'；
        var arr=this.Match(/\d+/g/);
        template=template.replace(/\{(\d+)\}/g,function(){
            var n=arguments[1],
                val=arr[n] || '0';
            var <10 ?val='0'+val:null;
            return val;
        })
    }
}（String.prototype）
//用法
var str='2018-4-4  16:32:8';
str.formatTime()
str.formatTime('{1}月{2}日 {3}时{4}分')
str.formatTime('{0}-{1}-{2}')
str.formatTime('{1}-{2} {3}-{4}')

var str='2018/4/4'
str.formatTime()

2、url地址问号传参解析

‘http://www.baidu.com?lx=1&name=aaa&sex=man#bbb' 问号后面的内容是参数信息,#后面的称为哈希（HASH）值

1
2
3
4
5
{
  lx:1,
  name:'aaa',
  sex:'man'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var str='http://www.baidu.com?lx=1&name=aaa&sex=man#bbb';
var indexASK = str.indexOf('?');
var indexWell = str.indexOf('#');  //#可能有可能没有

if(indexWell >-1){
    //存在#号我们截取到#
    str = str.substring(indexASK+1,indexWell)
}else{
    //不存在#我们截取到末尾
    str = str.substring(indexASK+1)
}
console.log(str)     //lx=1&name=aaa&sex=man

var arr=str.split('&')   // ['lx=1','name=aaa','sex=man']
console.log(arr)
var obj={};
for(var i=0;i<arr.length;i++){
    var item=arr[i];
    var itemArr=item.split('=')
    obj[itemArr[0]]=itemArr[1]
}

console.log(obj)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
~function(pro){
    pro.queryURLParameter=function(){
        var obj={};
        var reg=/([^?=&#]+)(?:=([^?=&#]+)?)/g;
        this.replace(reg,function(){
            var key=arguments[1],
                val=arguments[2]||null;
            obj[key]=val;
        })
        return obj;
    }
}(String.prototype)

var str='http://www.baidu.com?lx=1&name=aaa&sex=#bbb';
str.queryURLParameter();            //{lx: "1", name: "aaa", sex: null}

利用创建a标签的方法解析一个URL字符串问号传参和HASH值部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var str="http://www.baidu.com/stu?lx=1&name=AA&age=20#haha";

function queryURLParametr(str){
    //1、创建一个A标签，把需要解析的地址当做a标签的href赋值
    var newA=document.createElement('a');
    newA.href=str;
        //页面不需要展示newA，我们只是利用他的属性而已，所以不需要添加到页面中
    //2、a元素对象的hash/search两个属性分别存储了哈希值和参数值
    var search=newA.search.substr(1);
    console.log(newA.search)     //'?lx=1&name=AA&age=20'
    var hash=newA.hash.substr(1);
    console.log(newA.hash)     //'#haha'

    //3、分别解析出hash和参数即可
    var obj={};
    hash?obj.HASH=hash:null;
    
    if(search){
        var search=search.split('&');   //["lx=1","name=AA","age=20"]
        for(var i=0;i<search.length;i++){
            var itemArr=search[i].split('=');     //["lx","1"]
            obj[itemArr[0]]=itemArr[1]
        }
    }
    return obj;
}
console.log(queryURLParametr(str))  //{HASH: "haha", lx: "1", name: "AA", age: "20"}