javascript基础系列:字符串的常用方法

javascript基础系列:字符串的常用方法

字符串的常用方法

所有用的单引号、双引号、反引号包起来的都是字符串

1. charAt/charCodeAt

charAt:根据索引获取指定位置的字符
charCodeAt: 获取指定字符的ASCII码值(UNicode编码值)
@params
n[number] 获取字符指定的索引
@return
返回查找到的字符(找不到返回的是空字符串不是undefined,或者对应的编码值)

let str = 'zhufengpeiixunyangfangqihang';
console.log(str.charrAt(0)) // => Z

2. 'substr/substring/slice'

实现字符串截取
substr(n, m): 从索引n开始截取m个字符串,m不写截取到末尾
substring(n, m): 从索引n开始找到索引m处(不含m),超过索引的也只截取到末尾,不支持负索引
slice(n,m):和substriing一样,都是找到索引为m处,但是slice可以支持负数作为索引,其余两个方法是不可以的

let str = 'lanfengqiuqiu'
console.log(str.substr(3,2))
console.log(str.substring(3,5))

3. indexOf/lastIndexOf/includes()

验证字符是否存在
indexOf(n,m):获取n第一次出现位置的索引,m是控制查找的起始位置索引
lastIndexOf(x):最后一次出现位置的索引
没有这个字符,返回结果是-1

let str = 'lanfengqiuqiu'
console.log(str.indexOf('n')) // 验证第一次出现的位置,返回的索引
console.log(str.lastIndexOf('n'))
if(!str.includes('@')) {
    console.log('当前字符串不包含@')
}

4. toUpperCase/toLowerCase

字符串中字母大小写转换
toUpperCase():转大写
toLowerCase():转小写

5. split

split([分隔符]):把字符串按照指定的分隔符拆分成数组(和数组中的join相对应)
split方法支持传递正则表达式

//把|分隔符变成为,分隔符
let str = 'music|movie|eat|sport'
let arr = str.split('|')
console.log(arr)
arr.join()

6. replace

replace(新字符,老字符):实现字符串的替换(经常伴随着正则而用)

let str='岚枫@秋秋@前端'
str = str.replace('@', '-') //在不使用正则表达式的情况下
console.log(str) // 岚枫-秋秋@前端

// -----
let str='岚枫@秋秋@前端'
str = str.replace(/@/g, '-') //在不使用正则表达式的情况下
console.log(str) // 岚枫-秋秋@前端

7. match

localCompare
trim/trimLeft/trimRight
控制台输出String.prototype查看所有字符串中提供的方法

实现一些常用的需求

1. 时间字符串的格式化处理

// 方案一:用replace
let time = '2019-7-24 12:6:23'
// 变为自己需要呈现的格式
// “2019年07月24日 12时06分23秒”
time.replace('-', '年').replace('-','月').replace('', ‘日’)
.replace(':', ‘时’).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. 实现一个方法 queryUrlParams获取一个URL地址问号后面传递的参数信息

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.问号后面的值详细处理
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]包含参数和哈希值信息的对象
**/
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. 日期对象的基本操作

  1. 获取当前客户端(本地电脑)本地的时间
/**
 * 获取当前客户端(本地电脑)本地的时间
 * 这个时间用户是可以自己修改的,所以不能作为重要的参考依据
 * Thu Sep 10 2020 09:09:50 GMT+0800 (中国标准时间)
 * 获取的结果不是字符串是对象数据类型的,属于日期对象(或者说是Date这个类的实例对象)
**/
let time = new Date()

  1. 标准日期对象中提供了一些属性和方法,供我们操作日期信息
  • getFullYear()获取年
  • getMonth() 获取月
  • getDate() 获取日
  • getDay() 获取日期
  • getHours() 获取时
  • getMinutes() 获取分
  • getSeconds() 获取秒
  • getMilliseconds() 获取毫秒
  • getTime() 获取当前日期距离1970/1/1 00:00:00 这个日期之间的毫秒差
  • timetoLocaleDateString() 获取年月日(字符串)
  • timetoLocaleString() 获取完整的日期字符串
/**
 * queryDate:获取当前的日期,把其转换喂想要的格式
 * @params
 * @return
**/
function queryDate() {
  // 1. 获取当前日期及详细信息
    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:不足十补0
 * @params
 * @return
    处理后的结果(不足十位的补充零)
**/
function addZero(val) {
    val = Number(val);
  return val < 10 ? '0' + val : val
}
  1. new Date() 除了获取本机时间,还可以把一个时间格式字符串转化为标准的时间格式
new Date("2019/7/26") // Fri Jul 26 2019 00:00:00 GMT+0800 (中国标准时间)
// 
/**
    * 支持的格式
  * 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:不足十补0
 * @params
 * @return
    处理后的结果(不足十位的补充零)
**/
function addZero(val) {
    val = Number(val);
  return val < 10 ? '0' + val : val
}

/**
    * 基于日期对象处理
**/
function formatTime2(time) {
    // 1. 把时间字符串转换为标准日期对象
  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. 返回想要的结果
  return year + '年' + month + '月' + day + '日' + ' ' + hours + ':' + minutes + ':' + seconds
  
}

  1. 封装一个公用的时间字符串格式化处理的方式
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
}

总结:

今天主要分享一些字符串的常用方法及实现一些常用的需求,时间字符串处理,日期对象的基本操作,封装一个公用的时间字符串处理方式等等

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,753评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,668评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,090评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,010评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,054评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,806评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,484评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,380评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,873评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,021评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,158评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,838评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,499评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,044评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,159评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,449评论 3 374
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,136评论 2 356

推荐阅读更多精彩内容