文章目录
查找字符串
indexOf()、lastIndexOf()
/**
* indexOf() -- 从前往后第一次出现,第二个参数表示查找的起始位置
* lastIndexOf() -- 从后往前最后一次出现
* 获取字符串中指定内容的索引 -- 找到返回对应索引,找不到返回-1
*/
var str = 'hello world'
console.log(str.indexOf('o')) //4
console.log(str.lastIndexOf('o')) //7
console.log(str.indexOf('b')) //-1
console.log(str.indexOf('o', 5)) //7
/**
* 查找字符串"qianguyihao",所有a出现的次数和位置
*/
var str = 'qianguyihao'
var index = str.indexOf('a')
var num = 0
while (index !== -1) {
console.log(index)
num++
index = str.indexOf('a', index + 1)
}
console.log(num)
search()
/**
* search() 获取字符串中指定参数的索引(参数一般为正则)
* 找到返回第一次出现的索引,找不到返回-1
*/
var str = 'hello world'
console.log(str.search('wo')) //6
console.log(str.search(/wo/i)) //6
console.log(str.search(/ol/i)) //-1
includes()
/**
* 字符串中是否包含指定内容
* 参数opsition,表示查找的起始位置
* 包含返回true,否则返回false
*/
var str = 'hello world'
console.log(str.includes('llo')) //true
console.log(str.includes('oll')) //false
console.log(str.includes('wo', 3)) //true
startsWith()、endsWith()
/**
* startsWith() -- 是否以指定的内容开头
* endsWith() -- 是否以指定的内容结尾
* 是返回true,否返回false
* 第二个参数为匹配的起始位置
*/
var str = 'hello world'
console.log(str.startsWith('he')) //true
console.log(str.endsWith('ld')) //true
console.log(str.startsWith('el', 3)) //false
获取指定位置字符
charAt()
/**
* charAt(index)
* 获取指定位置的字符
* H5标准新增特性 str[index],其和str.charAt(index)同
*/
var str = 'hello world'
console.log(str.charAt(6)) //w
console.log(str.charAt()) //h
console.log(str.charAt(20)) // 空
charCodeAt(index)
/**
* charCodeAt(index)
* 获取指定位置的字符的Unicode编码
* 一般用来判断用户按下了哪个按键
*/
var str = 'hello world'
console.log(str.charCodeAt(6)) //119
console.log(str.charCodeAt()) //104
console.log(str.charCodeAt(20)) //NaN
/**
* 判断一串字符串的占位长度
* 英文占位一个字符
* 中文占位两个字符
*/
var str = 'hello world love and peace 我爱你中国'
function JudgeLen(string) {
let count = 0
for (var i = 0; i < string.length; i++) {
// 在0-127为英文字符,占一,其他为2
if (string.charCodeAt(i) < 128 && string.charCodeAt(i) >= 0) {
count++
} else {
count += 2
}
}
return count
}
console.log(JudgeLen(str))
字符串截取
slice()、substring()
/**
* slice(开始位置,结束位置)
* substring(开始位置,结束位置)
* substring与slice类似,但默认不接受负值,接受负值,当0处理
* substring还可以自动调整参数位置,如果第二个小于第一个,自动交换
*/
var str = 'hello world'
console.log(str.slice(2, 5)) //llo
console.log(str.substring(2, 5)) //llo
console.log(str.slice(2)) //llo world
console.log(str.substring(2)) //llo world
console.log(str.slice(-3)) //rld
console.log(str.substring(-3)) //hello world -- (0)
console.log(str.slice(1, -1)) //ello worl
console.log(str.substring(1, -1)) //h -- (0,1)
console.log(str.slice(5, 2)) //空
console.log(str.substring(5, 2)) //llo -- (2,5)
substr()
/**
* substr(开始索引,截取的长度)
* 不改变原字符串
* ECMAscript没有对其标准化,不建议使用
*/
var str = 'hello world'
console.log(str.substr(1, 3)) //ell
console.log(str.substr(1)) //ello world
console.log(str.substr(-3)) //rld
padStart()、padEnd()
/**
* JS字符串补全
* padStart()用于头部补全,padEnd()用于尾部补全。
*/
console.log('1'.padStart(2, '0')) // 01
console.log('1'.padEnd(2, '0')) //10
string.fromCharCode()
/**
* String.fromCharCode()
* 根据字符的Unicode编码获取字符
*/
console.log(String.fromCharCode(72)) //H
console.log(String.fromCharCode(20013)) //中
concat()
/**
* str1.concat(str2)
* 用于两个字符串的链接,一般不用,直接相加
* 数组也用concat,用于数组连接
*/
var str1 = 'hello '
var str2 = 'world'
var arr1 = [1, 2, 3]
var arr2 = [4, 5, 6]
console.log(str1.concat(str2)) // hello world
console.log(arr1.concat(arr2)) // [ 1, 2, 3, 4, 5, 6 ]
split()
/**
* 新的数组 = str.split(分割符)
* 将字符串转换为数组,不改变原字符串
* 一般用于从后台拿到json数据后的转化
*/
var str = 'love,and,peace'
console.log(str.split(',')) //[ 'love', 'and', 'peace' ]
replace()
/**
* 字符串替换
* 新的字符串 = str.replace(被替换的字符串,新的字符串)
* 返回新内容,不会修改原字符串
*/
var str = 'Today is fine day,today is not tomorrow'
console.log(str.replace('today', 'now')) //Today is fine day,now is not tomorrow
console.log(str.replace(/today/gi, 'now')) //now is fine day,now is not tomorrow
repeat()
/**
* repeat 重复字符串
* 新字符串 = str.repeat(重复次数)
*/
var str1 = 'hello'
console.log(str1.repeat(2)) //hellohello
var str2 = '15532776825'
console.log(str2.slice(0, -4) + '*'.repeat(4)) //1553277****
trim()
/**
* trim()
* 去除字符串首尾空白
*/
var str = ' a b c '
console.log(str) // a b c
console.log(str.length) //7
console.log(str.trim()) //a b c
console.log(str.trim().length) //5
toLowerCase()、toUpperCase()
/**
* 大小写转化
* toLowerCase() -- 转小写
* toUpperCase() -- 转大写
*/
var str = 'regGUP'
console.log(str.toLowerCase()) //reggup
console.log(str.toUpperCase()) //REGGUP
console.log(str.slice(0, 1).toUpperCase() + str.slice(1)) //RegGUP
html 方法
/**
* html方法
*/
var str = 'hello world'
console.log(str.anchor('bing')) //<a name="bing">hello world</a>
console.log(str.big()) //<big>hello world</big> -- h5不支持
console.log(str.sub()) //<sub>hello world</sub>
console.log(str.sup()) //<sup>hello world</sup>
console.log(str.link('cn.bing.com')) //<a href="cn.bing.com">hello world</a>
console.log(str.bold()) //<b>hello world</b>
练习
/**
* 查找字符串中所有m出现的位置
* smyhvaevaesmyh
*/
var str = 'smyhvaevaesmyh'
// 第一种
var index = str.indexOf('m')
while (index !== -1) {
console.log(index) // 1 11
index = str.indexOf('m', index + 1)
}
//第二种
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) === 'm') {
console.log(i) //1 11
}
}
/**
* 判断一个字符串中出现次数最多的字符
* 统计这个次数
* smyhvaevaesmyh
*/
var str1 = 'smyhvaevaesmyhvae'
var json = {}
for (i = 0; i < str1.length; i++) {
var key = str1.charAt(i)
if (json[key] === undefined) {
json[key] = 1
} else {
json[key] += 1
}
}
console.log(json)
var maxValue = 0
var maxChar = ''
for (let v in json) {
if (json[v] > maxValue) {
maxValue = json[v]
maxChar = v
}
}
console.log('出现最多字符为:' + maxChar + ' ,出现次数为:' + maxValue)
for…in vs for…of
/**
* for...in vs for...of
* for...in遍历时取得key和index -- 适合遍历对象;遍历数组顺序不固定
* for...of遍历时取得value -- 适合遍历数组
* for...of循环适合遍历map、set、数组对象、字符串等有迭代器对象的集合,不能遍历普通对象
* ES5增加forEach用于数组的遍历,但不能正确响应break、continue、return语句,for...of可以
* 如果想要对普通对象进行遍历,用for...in或内建Object.keys()
*/
var str = {
name: 'falcon',
age: 21,
sex: '女',
}
var arr = ['Chinese', 'Math', 'English']
var arr1 = [
{
id: 1,
name: 'falcon',
lesson: 'Chinese',
},
{
id: 2,
name: 'alice',
lesson: 'Math',
},
{
id: 3,
name: 'jerry',
lesson: 'English',
},
]
for (let v in str) {
console.log(v) //name age sex
console.log(str[v]) //falcon 21 女
}
for (let v in arr) {
console.log(v) //0 1 2
console.log(arr[v]) //Chinese Math English
}
for (let v in arr1) {
console.log(v) //0 1 2
console.log(arr1[v]) //每个对象
}
// for (let v of str) {
// console.log(v); 报错str is not iterable,因为没有迭代器对象
// }
for (let v of arr) {
console.log(v) //Chinese Math English
}
for (let v of arr1) {
console.log(v) //遍历出每个对象
}
注:以上所有方法总结和案例参考“千古壹号”web 自学路线资料总结