章节介绍与类型判断
看看构造函数
<!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>
<script>
let hd=[]
let hdcms = {}
console.log(hd instanceof Array) //判断是否在原型链上（是否由这个构造函数创建出来
console.log(hdcms instanceof Object)
</script>
</body>
</html>都是true
字符串转义与模板字面量使用
<!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>
<script>
let hd = 'houdun\'人'
console.log(hd)
</script>
</body>
</html>加个\就成了
模板字面量浅谈使用技巧
<!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>
<script>
let lessons= [
{title:"媒体查询响应式布局"},
{title:"FLEX弹性盒模型"},
{title:"GRID栅格系统"}
]
function template(){
return `
<ul>${lessons.map(item=>`<li>${item.title}</li>`).join('')}</ul>
`
}
document.body.innerHTML=template()
</script>
</body>
</html>神奇的标签模板实例操作
<!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>
<script>
let name = '后盾人'
let web = "houdunren.com"
console.log(tag`在线教程${name}，网址是${web}`)
function tag(strings,...vars){
console.log(vars)
console.log(strings)
}
</script>
</body>
</html>
打印出来是这样的
<!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>
<script>
let lessons = [
{ title: "后盾人媒体查询响应式布局", author: '后盾人向军' },
{ title: "FLEX弹性盒模型", author: '后盾人' },
{ title: "GRID栅格系统后盾人教程", author: '古老师' }
]
function template() {
return `
<ul>${lessons.map(item => links`<li>作者：${item.author},课程：${item.title}</li>`)
.join('')}
</ul>`
}
function links(strings, ...vars) {
return strings.map((str, key) => { //将字符替换成链接
return str + (vars[key] ? vars[key].replace("后盾人",`<a href="https://www.houdunren.com">
后盾人</a>`) : "") //变量数量多
}).join('')
}
document.body.innerHTML += template()
</script>
</body>
</html>这是把字符替换成链接了
字符串及基本函数使用
<!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>
<input type="text" name="password">
<span></span>
<script>
let ps = document.querySelector("[name='password']")
ps.addEventListener('keyup',function(){
this.value = this.value.trim()
let error = " "
let span = document.getElementsByTagName('span')
if(this.value.length<5){
error="密码不能小于五位"
}
span[0].innerHTML=error
})
</script>
</body>
</html>可以做渐变（可能）效果
<!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>
<script>
let hd = 'houdunren'
for(let i =0;i<hd.length;i++){
let span = document.createElement("span")
span.style.fontSize = (i+1)*10+'px'
span.innerHTML = hd[i]
document.body.append(span)
}
</script>
</body>
</html>字符串截取操作
让我们看一下字符串的截取操作
<!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>
<script>
let hd = "houdunren.com"
console.log(hd.slice(1,3))
console.log(hd.substr(1,3))
console.log(hd.substring(1,3))
console.log(hd.slice(-3,-1))
console.log(hd.substr(-3))
console.log(hd.substring(-3,2))
</script>
</body>
</html>
解锁字符串使用技巧
<!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>
<script>
const hd = "houdunren.com"
//从哪个位置开始找，找不到就是-1
if (hd.indexOf('h') != -1) {
console.log('找到了')
}
console.log(hd.includes("h",8)) //和上面的作用一样
console.log(hd.startsWith('H')) //返回布尔类型，看是否在开始
console.log(hd.lastIndexOf('o',9)) //从后向前查
</script>
</body>
</html>这是数组的some方法
查找字符串方法：
<!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>
<script>
const word = ["php","css"]
const string = "我喜欢在后盾人学习php与css芝士"
const status = word.some(word=>{
console.log(word)
return string.includes(word)
})
if(status){
console.log('找到了')
}
</script>
</body>
</html>字符串替换标题关键词
<!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>
<script>
const hd = "houdunren.com"
console.log(hd.replace('houdunren','hdcms'))
const word = ["php" , "css"]
const string = "我其实不喜欢学php和css"
const repaceString = word.reduce((pre,word)=>{
return pre.replace(word,`<a href="?w=${word}">${word}</a>`)
},string)
console.log(repaceString)
document.body.innerHTML += repaceString
</script>
</body>
</html>
好吧，好难理解 