0
点赞
收藏
分享

微信扫一扫

字符串常用方法

字符串:

索引

1、存在索引,从0开始 :

第一个字符索引 0 ,第二个字符索引 1 ··· ···

2、指定索引不存在,结果 undefined 

let str = 'a'
str[1000] -> undefined

length

1、获取字符串长度

let len = 'lxc'.length // 3
// 获取最后一个字符
let last = 'lxc,hello'
last[last.length - 1] // 'o'

常用方法:

1、str.charAt(index

返回指定索引位置的字符,和 str[index] 获取索引一样,当前索引不存在,返回空字符串

'lxc'.charAt() // l
'lxc'.charAt(2) // c

2、str.charCodeAt ( index )

在charAt基础上,获取字符的ascll码(把获取的字符变为unicode编码值),(对应ascll码表:)

48到57 -> 0到9

65到90 -> A到Z

97到122 -> a到z

3、String.fromCharCode(unicode值)

把值按照ASCLL码表中的信息,转换为原有的字符,和charCodeAth正好对应

String.fromCharCode(65) // A

小案例:

1。 colorUI库中的索引组件,用到了此方法,输出大写A到Z 26个字母:

let list = [{}];
for (let i = 0; i < 26; i++) {
list[i] = {};
list[i].name = String.fromCharCode(65 + i) // 65到90正好是大写 A到Z
}

2。

字符串常用方法_vue.js

字符串常用方法_正则匹配_02

************ 常用三种截取**************

4、str.substr(n, m) 

从索引n开始截取m个字符

(1)只写一个参数表示从n开始,截取到最后。

字符串常用方法_正则匹配_03

5、substring(n,m)

从索引n开始,截取到索引m处(不包含m)  

(1)只写一个参数表示从n开始,截取到最后。

字符串常用方法_vue.js_04

补充:

举例:

在vue2.0 + 源码中,模板解析使用substring来删除正则已匹配到的字符。

template - 是字符串模板,每次将正则匹配到的字符删除,再赋值给模板,方便下次匹配模板下一个字符;

参数n - 是正则匹配到的字符的长度。

从匹配到的字符长度开始截取,截取到最后。

// ...
function advance(n) {
template = template.substring(n)
}
// ...

6、str.slice(n, m)

和substring语法一样,区别在于slice支持以负数做索引

  (1) 索引为负数,浏览器处理原理:字符串的长度+ 字符串索引 -> 按照正数处理操作

(2)只写一个参数表示从n开始,截取到最后。

(3)无参数,相当于把整个字符串截取 -> 相当于克隆

字符串常用方法_正则_05

字符串常用方法_字符串_06

字符串常用方法_vue.js_07

************ 大小写转化 ***********************************************************************************

7、str.toUpperCase()

把字母全部大写

8、str.toLowerCase()

把字母全部小写

字符串常用方法_正则_08

************ 获取字符索引 ***********************************************************************************

9、str.indexOf()

获取字符在字符串中第一次出现的位置(索引),没找到,则返回-1。

字符串常用方法_正则_09

10、str.lastIndexOf()

获取字符在字符串中最后一次出现的位置(索引),没找到,则返回-1。

字符串常用方法_正则_10

************ 拆分字符串 ***********************************************************************************

11、str.split(  ) 

字符串转数组的方法,以参数形式,拆分字符串,组成数组的每一项,与数组方法 join() 对应。

字符串常用方法_正则匹配_11

以空字符串拆分,这可以结合正则 中的 ?=n 正向预查:匹配出后边紧跟着n的字符,如果前边没有字符,它会按照空字符来匹配,也就是把空字符给匹配出来了,详情见我的正则文章。

字符串常用方法_vue.js_12

没参数拆分

字符串常用方法_vue.js_13

(1)当然参数也支持正则匹配:

实战例子:一个截取路径?后边字符,把后边查询参数以键值对的形式组装起来

const URL = 'http://www.baidu.com/index?name=lxc&age=20'
// 方法一
function splitURL(url) {
if (url.indexOf("?") === -1) {return false}
const p = url.split("?")[1].split(/(?:\&)/g) // ?: 匹配不捕获,也就是不输出小括号中的内容
const r = p.reduce((prev, next)=> {
prev[next.split("=")[0]] = next.split("=")[1]
return prev
}, {})
return r
}
let r = splitURL(URL) // {name: "lxc", age: "20"}
// 方法二
function splitURL(url) {
if (url.indexOf("?") === -1) {return false}
let reg = /([^?&=]+)=([^?&=]+)/g
let obj = {}
url.replace(reg, (...$s) => {
console.log($s)
obj[$s[1]] = $s[2]
})
return obj
}
let r = splitURL(URL) // {name: "lxc", age: "20"}

字符串常用方法_正则_14

(2)ES6中还有一种方法可以把字符串转数组

let str = 'hello'
let r = [...str] // ["h", "e", "l", "l", "o"]

************字符串替换 ***********************************************************************************

12、str.replace(n, m)

把m替换成n,在单独使用时,只能替换一次,如果搭配正则,它会替换多次。

此方法搭配正则在项目中很常用。。。

************去除空格***********************************************************************************

13、str.trim()去除首尾空格

str.trimLeft()去除开始的空格

str.trimRight( ) 去除结尾的空格

14、补充: Es6 中 padStart( ) / padEnd( ) 字符串补位

在获取当前时间的时候,如果年月日时间是一个数 (2020-5-8)前边会加 0来补位。

padStart( ) / padEnd( ) 一个是在字符串前边补位,一个是在后边补位

  (1) 参数一:需要补多少位

(2)参数二:补的是什么

string.padStart(count, string)

字符串常用方法_字符串_15

兼容性

字符串常用方法_正则_16

小案例:

随机字符串:

// 随机验证码
function randomCode() {
const RANDOMCODE = '1234567890wqretyiopasdhjklzxcvbn'
let code = ''
for(let i = 0; i < 4; i ++) {
// 上边是32个字符,四舍五入的话最大能到33,所以需要*30,
// 四舍五入最大到31,正好是字符串最后一位
let randomIndex = Math.round(Math.random()*30)
let rCode = RANDOMCODE[randomIndex]
console.log(rCode, randomIndex)
if (code.toLowerCase().indexOf(rCode.toLowerCase()) > -1) {
i--;
continue;
}
code += rCode
}
return code
}


举报

相关推荐

0 条评论