javascript基礎(chǔ)系列：字符串的常用方法
字符串的常用方法
所有用的單引號扰法、雙引號、反引號包起來的都是字符串
1. charAt/charCodeAt
charAt:根據(jù)索引獲取指定位置的字符
charCodeAt: 獲取指定字符的ASCII碼值（UNicode編碼值）
@params
n[number] 獲取字符指定的索引
@return
返回查找到的字符（找不到返回的是空字符串不是undefined,或者對應(yīng)的編碼值）
let str = 'zhufengpeiixunyangfangqihang';
console.log(str.charrAt(0)) // => Z
2. 'substr/substring/slice'
實(shí)現(xiàn)字符串截取
substr(n, m): 從索引n開始截取m個(gè)字符串决左，m不寫截取到末尾
substring(n, m): 從索引n開始找到索引m處（不含m）,超過索引的也只截取到末尾，不支持負(fù)索引
slice(n,m):和substriing一樣走贪，都是找到索引為m處佛猛，但是slice可以支持負(fù)數(shù)作為索引，其余兩個(gè)方法是不可以的
let str = 'lanfengqiuqiu'
console.log(str.substr(3,2))
console.log(str.substring(3,5))
3. indexOf/lastIndexOf/includes()
驗(yàn)證字符是否存在
indexOf(n,m):獲取n第一次出現(xiàn)位置的索引坠狡，m是控制查找的起始位置索引
lastIndexOf(x):最后一次出現(xiàn)位置的索引
沒有這個(gè)字符继找，返回結(jié)果是-1
let str = 'lanfengqiuqiu'
console.log(str.indexOf('n')) // 驗(yàn)證第一次出現(xiàn)的位置，返回的索引
console.log(str.lastIndexOf('n'))
if(!str.includes('@')) {
console.log('當(dāng)前字符串不包含@')
}
4. toUpperCase/toLowerCase
字符串中字母大小寫轉(zhuǎn)換
toUpperCase():轉(zhuǎn)大寫
toLowerCase():轉(zhuǎn)小寫
5. split
split([分隔符])：把字符串按照指定的分隔符拆分成數(shù)組（和數(shù)組中的join相對應(yīng)）
split方法支持傳遞正則表達(dá)式
//把|分隔符變成為,分隔符
let str = 'music|movie|eat|sport'
let arr = str.split('|')
console.log(arr)
arr.join()
6. replace
replace(新字符逃沿，老字符)：實(shí)現(xiàn)字符串的替換（經(jīng)常伴隨著正則而用）
let str='嵐楓@秋秋@前端'
str = str.replace('@', '-') //在不使用正則表達(dá)式的情況下
console.log(str) // 嵐楓-秋秋@前端
// -----
let str='嵐楓@秋秋@前端'
str = str.replace(/@/g, '-') //在不使用正則表達(dá)式的情況下
console.log(str) // 嵐楓-秋秋@前端
7. match
localCompare
trim/trimLeft/trimRight
控制臺輸出String.prototype查看所有字符串中提供的方法
實(shí)現(xiàn)一些常用的需求
1. 時(shí)間字符串的格式化處理
// 方案一：用replace
let time = '2019-7-24 12:6:23'
// 變?yōu)樽约盒枰尸F(xiàn)的格式
// “2019年07月24日 12時(shí)06分23秒”
time.replace('-', '年').replace('-','月').replace('', ‘日’)
.replace(':', ‘時(shí)’).replace(':', '分') + ‘秒’;
console.log(time)
// 方案二
let addZero = val => val.length < 2 ? '0' + val : val
let time = '2019-7-24 12:6:23'
let ary = time.split(/(?: |-|:)/g)
time = ary[0]+ '年'+ addZero(ary[1]) + '月' + addZero(ary[2]) + '日'
2. 實(shí)現(xiàn)一個(gè)方法 queryUrlParams獲取一個(gè)URL地址問號后面?zhèn)鬟f的參數(shù)信息
let url = 'http://www.baidu.com?lx=1&name=lanfeng&teacher=aaa#box'
/**
lx: 1,
name:'lanfeng',
teacher: 'aaa',
hash: 'box'
**/
//1. 獲取問號后面的值
let askIndex = url.indexOf('?')
let wellIndex = url.indexOf('#')
let askText = url.substring(askIndex+1,wellIndex)
let wellText = url.substring(wellIndex+1)
console.log(askText, wellText)
//2.問號后面的值詳細(xì)處理
let result = {};
let askAry = askText.split('&');
console.log(askAry)
askAry.forEach(item => {
let n = item.split('=')
result[n[0]] = n[1]
})
result['hash']= wellText
//-----
/**
*queryURLParams: 獲取URL地址中問號傳參的信息和哈希值
* @params
url[string]要解析的url字符串
* @return
[object]包含參數(shù)和哈希值信息的對象
**/
function queryURLParams(url) {
let askIn = url.indexOf('?');
let wellIn = url.indexOf('#');
let askText = ''
let wellText = ''
wellIn === -1 ? wellIn = url.length : null
askIn >=0 ? askText = url.substring(askIn+1 , wellIn) : null
wellText = url.substring(wellIn+1)
// 獲取每一部分信息
let result = {}
wellText !== '' ? result['hash'] = wellText : null
if(askText !== '') {
let ary = askText.split('&');
ary.forEach(item => {
let itemAry = item.split('=')
result[itemAry[0]] = itemAry[1]
})
}
return result
}
let url = 'http://www.baidu.com?lx=1&name=lanfeng&teacher=aaa#box'
let paramsObj = queryURLParams(url)
console.log(paramsObj)
3. 日期對象的基本操作
- 獲取當(dāng)前客戶端（本地電腦）本地的時(shí)間
/**
* 獲取當(dāng)前客戶端（本地電腦）本地的時(shí)間
* 這個(gè)時(shí)間用戶是可以自己修改的婴渡，所以不能作為重要的參考依據(jù)
* Thu Sep 10 2020 09:09:50 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
* 獲取的結(jié)果不是字符串是對象數(shù)據(jù)類型的，屬于日期對象（或者說是Date這個(gè)類的實(shí)例對象）
**/
let time = new Date()
- 標(biāo)準(zhǔn)日期對象中提供了一些屬性和方法感挥，供我們操作日期信息
- getFullYear()獲取年
- getMonth() 獲取月
- getDate() 獲取日
- getDay() 獲取日期
- getHours() 獲取時(shí)
- getMinutes() 獲取分
- getSeconds() 獲取秒
- getMilliseconds() 獲取毫秒
- getTime() 獲取當(dāng)前日期距離1970/1/1 00:00:00 這個(gè)日期之間的毫秒差
- timetoLocaleDateString() 獲取年月日（字符串）
- timetoLocaleString() 獲取完整的日期字符串
/**
* queryDate:獲取當(dāng)前的日期缩搅，把其轉(zhuǎn)換喂想要的格式
* @params
* @return
**/
function queryDate() {
// 1. 獲取當(dāng)前日期及詳細(xì)信息
let time = new Date(),
year = time.getFullYear(),
month = time.getMonth() + 1
day = time.getDate(),
week = time.getDay(),
hours = time.getHours(),
minutes = time.getMinutes(),
seconds = time.getSeconds();
// 2. 拼湊成我們想要的字符串
let weekAry = ['日', '一', '二', '三', '四', '五', '六']
let result = year + "年" + addZero(month) + "月" + addZero(day) + "日"
result += "星期" + weekAry[week] + " "
result += addZero(hours)+ ":" + addZero(minutes) + ":" + addZero(seconds);
}
/**
* addZero：不足十補(bǔ)0
* @params
* @return
處理后的結(jié)果（不足十位的補(bǔ)充零）
**/
function addZero(val) {
val = Number(val);
return val < 10 ? '0' + val : val
}
- new Date() 除了獲取本機(jī)時(shí)間，還可以把一個(gè)時(shí)間格式字符串轉(zhuǎn)化為標(biāo)準(zhǔn)的時(shí)間格式
new Date("2019/7/26") // Fri Jul 26 2019 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
//
/**
* 支持的格式
* yyyy/mm/dd
* yyyy-mm-dd 這種格式在ie下不支持
**/
// ------
let time = '2019-5-30 12:0:0'
// => "2019年-5月30日 12:0:0"
/**
* 字符串處理解決方法
**/
function formatTime(time) {
// 1. 先獲取年月日信息
let ary = time.split(''),
aryLeft = ary[0].split('-'),
aryRight = ary[1].split(':');
ary = aryLeft.concat(aryRight)
// 2. 拼接成為我們想用的格式
let result = ary[0] + '年'+ addZero(ary[1]) + '月' + addZero(ary[2]) + '日';
result += ' ' + addZero(ary[3]) + ':' + addZero(ary[4]) + ':' + addZero(ary[5])
}
formatTime(time)
/**
* addZero：不足十補(bǔ)0
* @params
* @return
處理后的結(jié)果（不足十位的補(bǔ)充零）
**/
function addZero(val) {
val = Number(val);
return val < 10 ? '0' + val : val
}
/**
* 基于日期對象處理
**/
function formatTime2(time) {
// 1. 把時(shí)間字符串轉(zhuǎn)換為標(biāo)準(zhǔn)日期對象
time = time.replace(/-/g, '/')
time = new Date(time)
//2. 基于方法獲取年月日等信息
let year = time.getFullYear(),
month = addZero(time.getMonth() + 1),
day = addZero(time.getDate()),
hours = addZero(time.getHours()),
minutes = addZero(time.getMinutes()),
seconds = addZero(time.getSeconds())
// 3. 返回想要的結(jié)果
return year + '年' + month + '月' + day + '日' + ' ' + hours + ':' + minutes + ':' + seconds
}
- 封裝一個(gè)公用的時(shí)間字符串格式化處理的方式
String.prototype.formatTime = function formatTime(template) {
typeof template === 'undefined' ? template = "{0}年{1}月{2}日 {3}:{4}:{5}" : null
// this: 要處理的字符串
let MatchAry = this.match(/\d+/g)
template = template.replace(/\{(d+)\}/g,(x, y)=> {
let val = matchAryy[y] || '00'
val.length < 2 ? val = '0' + val : null
return val
})
return template
}
總結(jié)：
今天主要分享一些字符串的常用方法及實(shí)現(xiàn)一些常用的需求触幼，時(shí)間字符串處理硼瓣，日期對象的基本操作，封裝一個(gè)公用的時(shí)間字符串處理方式等等
