JavaScripts基础（8）字符串操作方法全解析-一一网

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

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

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

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'

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、支持负数索引；用字符串的总长度+负数索引做运算

var str = 'liyapeiaixuexi'
str.slice(2,7)  //'yapei'
str.slice(2)    //'yapeiaixuexi'
str.slice()     //'liyapeiaixuexi'
str.slice(-3,-1)    //'ex'
复制代码

substring

和slice语法完全一模一样；

唯一的区别：

slice支持负数索引，而substring不支持负数索引

负数索引返回空字符串

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不能为负），负数是总长度+负数索引做运算

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大写转小写

var str = 'LiYaPei'
str.toUpperCase() //LIYAPEI
str.toLowerCase() //liyapei
复制代码

split拼接,和数组中的join相对应

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

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

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

作用：替换字符串中的原有字符
参数：原有字符，要替换的字符
返回值：替换后的字符串
原有字符出现多次时，不用正则的情况下只能替换第一个找到的原有字符

//=>把'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分’


//补零函数
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+'分'

复制代码

时间字符串处理

~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地址问号传参解析

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

{
  lx:1,
  name:'aaa',
  sex:'man'
}
复制代码

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)
复制代码

~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值部分

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"}
复制代码