String的常用方法
长度 s.length
-
拼接字符串
s.concat('内容','可拼接多个')
,或者使用+号链接符,返回一个新字符串 -
位置查找字符串方法;返回字符
查找某位置上的字符 s.charAt(下标)
返回该下标位置上的字符,未找到返回空白
返回某位置上的字符s[下标](只读,不能赋值),不支持复数
未找到返回undifined
-
字符串搜索方法;
返回第一次出现的位置下标
s.indexOf('字符(串)')
未找到返回-1;二参为搜索的起始位置(包括起始位置),返回下标位置返回最后一次
s.lastIndexOf('')
;接受二参时,往前截取,返回下标位置s.search(//)
支持正则的,没有二参,返回第一位置,未果-1,返回下标位置s.match(/\d/gi)
正则。返回数组,返回所有,未果返回nulls.matchAll()
返回一个迭代器,包含字符串和匹配结果;Array.form()查看匹配结果 -
判断字符串包含问题
s.includes('')
返回true或者false , 二参起始位置, 区分大小写以指定字符串开头
s.startsWith('')
,结束s.endsWith()
,返回布尔值 -
截取字符串;不包括二参end位置
返回截取的字符串
s.slice()
可选二参,默认截取全部,缺省二参,直接到末尾,负数从末尾开始数;起始位置颠倒返回空白类似slice
s.substring()
负数被视为0,起始位置可颠倒s.substr()
二参,缺省二参,直接截取到末尾,不同于前两个方法的是,二参为制定截取的个数。一参为负数时,从末尾开始计算(从1开始数)。注意:正数从头开始,以0开头;;负数从末尾开始,以1开始数.
-
转换大小写
s.toUpperCase()
大写s.toLowerCase()
小写 -
删除空格
s.trim()
s.trimStart()
s.trimEnd()
-
指定元素填充字符串到指定长度
二参为填充的元素,一参为指定字符串的长度,
s.padStart(4,'h')
s.padEnd(4,'0')
-
字符串重复
s.repeat(重复几次)
-
替换字符串内容
s.replace('指定字符','替换字符')
s.replace(/a/g,'')
可以配合正则表达式;i不区分大小写;g全局匹配;;未果返回原字符串s.replaceAll(/Cats/g,'Dogs')
必须设置全局标志 -
字符串转为数组
将字符串转换为数组 s.split()
数组的[0]包括整个字符串; s.split('')
单个字符为数组的每一项
处理数字类型,可先转为字符串类型 n.toString()
注意:所有字符串方法都返回一个新字符串,不会修改原始字符串
-
es6中模版字符串
1.使用反引号``
2.变量使用${}进行书写
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
- 简单实现走马文字的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
let str = "亲爱的XXX:欢迎观看";
let i = 1;
let box = document.getElementById('box');
const showText = () => {
box.innerHTML = str.substr(0, i++) + '_';
if (i > str.length) {
clearInterval(timer);
}
}
const timer = setInterval(showText, 500);
</script>
</body>
</html>
效果如下:未设置样式