课程来源:B站后盾人

typeof和instanceof的使用

let a = 10
console.log(typeof a)
let b = ''
console.log(typeof b)
let c = []
console.log(typeof c)
let d = {
   }
console.log(typeof d)
// {},[]都是Object,怎么办呢?
console.log(c instanceof Array)
console.log(d instanceof Array)
console.log(c instanceof Object)
console.log(d instanceof Object)

运行结果:

制表符和换行符

  • 制表符:\t
  • 换行符:\n 
let hd = 'du\ts\nt'
console.log(hd);

运行结果:

模板字符串

let namee = 'dust'
let age = 20
let a = `${
     namee}今年${
     age}岁`
console.log(a)
  • 这是一个非常简单的字符串连接方式,取值方式为${这里是变量名}
  • 看下运行结果就明白了:

标签模板

这是JS的一个独有的特性了,当你不知道要传入几个参数时特别好用

let namee = 'dust'
let web = 'dust.com'
let age = 20
console.log(`${
     namee}网址是${
     web}`)
function tag(strings, ...vars) {
   
  console.log(vars)
  console.log(strings)
}
tag(namee, web, age)

运行结果:

字符串的基本函数使用

先来看看这个有趣的效果

用一个for来不断改变字体大小就可以实现(基于dom操作)
代码:

let a = 'hellodust'

for (let i = 0; i < a.length; i++) {
   
  let span = document.createElement('span')
  span.innerHTML = a[i]
  span.style.fontSize = (i + 1) * 10 + 'px'
  document.body.append(span)
}

字符串截取操作

  • slice substring substr的使用
  • 其中substring不能添加负数为参数,它会将负数参数视为0 
let a = 'hello,dust!'

console.log(a.slice(0))
console.log(a.slice(1))
console.log(a.slice(1, 3))

// substring()不可以添负数哦
console.log(a.substring(1, 3))
console.log(a.substr(1, 3))

运行结果:

字符串的检索

  • indexOf的使用
  • indexOf可以显示本字符第一次出现的位置(下标),如果没有这个字符,则返回-1 
console.log(a.indexOf('o'))
console.log(a.indexOf('a'))

运行结果:

  • includes的使用:
  • includes返回一个boolean值,表示这个字符串中是否包含被查找的内容 
console.log(a.includes('o'))
console.log(a.includes('a'))

运行结果:

  • startsWith的使用
  • startsWith返回一个boolean值,表示本字符串是否以这个为开头
  • 注意,startsWith是区分大小写的 
let a = 'Hello,dust!'
console.log(a.startsWith('o'))
console.log(a.startsWith('h'))
console.log(a.startsWith('he'))
console.log(a.toLowerCase().startsWith('he'))

运行结果:

  • some的使用
  • some返回一个boolean值,表示是否含有本数组内的字符串
  • 文字不太好描述,看代码会简单一点 
const word = ['php', 'css']
const string = 'dust likes to learn html and css.'
const statuss = word.some((word) => {
   
  return string.includes(word)
})
if (statuss) {
   
  console.log('找到了')
}

运行结果:

  • reduce的使用
  • reduce允许传入两个参数,第一个参数为上一个的回调函数,第二个参数为本项
  • 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次的回调函数，并返回最后一次回调函数的返回值。 
const word = ['php', 'css']
const string = 'dust likes to learn php and css.'
const replaceString = word.reduce((pre, word) => pre.replace(word, `<span style="color:red">${
     word}</span>`), string)

console.log(replaceString)
document.body.innerHTML += replaceString

运行结果:

电话号码的模糊处理

function phone(mobile, len = 3) {
   
  return String(mobile).slice(0, len * -1) + '*'.repeat(len)
}

console.log(phone(98765432101))

运行结果:

提取数字

  • parseInt和parseFloat允许提取字符串头几位的数字,但是如果第一位不是数字,则会返回NaN 
const str = '99.99hello'
const str1 = 'hello99.99dust'

console.log(parseInt(str))
console.log(parseInt(str1))
console.log(parseFloat(str))
console.log(parseFloat(str1))

运行结果:

字符串的拆分与合并

  • spilt传入一个参数,遇到这个就把它隔开(字符串使用)
  • join传入一个参数,返回一个字符串,中间加入这个参数(数组使用) 
const str = '99.99hello'
const str1 = 'hello99.99dust'
console.log(str.split(''))
console.log(str.split('e'))
let s = str.split('')
console.log(s.join(','))

运行结果:

数字转化为字符串

let a = 99
console.log(a.toString())

运行结果:

隐式转换

  • 关于隐式转换:false=0,true=1
  • 比如:一瓶可乐和一瓶水不能直接比较哪个大,那么怎么办呢?把他们都转换成人民币来比较
  • 在此,Number类型就是这个"人民币" 
console.log(-1 < false)
console.log(1 == true)

运行结果:

  • 一个引用类型(对象)转换成boolean类型时:是true,这个是比较
  • 但是空数组转换成Number类型时等于0,这个是转换
  • 这个是不能混为一谈的
  • 关于数组和对象的隐式转换如下: 
console.log([] == false)
console.log([] == 0)
console.log({
   } == false)
console.log({
   } == 0)

Number的toFixed的使用

  • toFixed()保留几位小数 
let a = 99.987654
console.log(a.toFixed(3))

运行结果: