JavaScript学习笔记

# 四.字符串

# 1.模板字符串

# 1.1 用法

  • 1.拼接字符串

将下面的字符串拼接到一起

let name = "abc"
let age = 6
let str = "hello~" + name + "今年" + age + "岁了" // 以前的用法
let str2 = `hello~${name}今年${age}岁了` // 现在的用法
1
2
3
4
  • 2.拼写 dom

以前的写法

let ul = " <ul>" + "<li>" + name + "</li>" + "<li>" + age + "</li>" + "</ul>"
1

现在的写法(好处：可以换行 可以支持取值)

let ul = `<ul>
            <li>${name}</li>
            <li>${age}</li>
        </ul>`
1
2
3
4

模板字符串用反引号包含，其中的变量用${}括起来

var name = "abc",
  age = "11"
let desc = `${name} is ${age} old`
console.log(desc)
// 所有模板字符串的空格和换行都被保留
var str = `<ul>
            <li>1</li>
            <li>2</li>
            <ul>`
console.log(str)
1
2
3
4
5
6
7
8
9
10

提示

其中变量会用变量的值替换掉

function replace(desc) {
  return desc.replace(/\$\{([^}]+)\}/g, function (matched, key) {
    return eval(key)
  })
}
1
2
3
4
5

# 1.2 带标签用法

可以在模板字符串的前面添加一个标签，这个标签可以去处理模板字符串，标签其实就是一个函数，函数可以接受两个参数，一个是string,就是模板字符串里面的每个字符串，还有一个参数可以使用rest的形式value,这个参数是模板字符串里面的值

var name = "abc",
  age = 11
function desc(strings, ...values) {
  console.log(strings, values)
}
desc`${name} is ${age} old!`
1
2
3
4
5
6

# 1.3 实现方式

let name2 = "xxx"
let age2 = 9
let str2 = "hello${name2}今年${age2}岁了"
str2 = str2.replace(/\$\{([^}]*)\}/g, function () {
  return eval(arguments[1])
})
console.log(str2)
1
2
3
4
5
6
7

# 3.字符串新方法

# 3.1 includes

  • 返回布尔值，表示是否找到参数字符串
var s = "abc"
s.includes("b") // true
1
2

第二个参数表示开始搜索的位置

var s = "zbcd"
console.log(s.includes("b", 2)) // false
1
2

# 3.2 startsWith

  • 返回布尔值，表示参数字符串是否在源字符串的头部
var s = "abc"
s.startsWith("a") // true
1
2

第二个参数表示开始搜索的位置

var s = "zbcd"
console.log(s.startsWith("b", 2)) // false
1
2

# 3.3 endsWith

  • endsWith():返回布尔值，表示参数字符串是否在源字符串的尾部
var s = "abc"
s.endsWith("c") // true
1
2

第二个参数表示开始搜索的位置

var s = "zbcd"
console.log(s.endsWith("b", 2)) // true
1
2

endsWith 的行为与其他两个方法有所不同。它针对前 n 个字符，而其他两个方法针对从第 n 个位置直到字符串结束

# 3.4 repeat

返回一个新字符串，表示将原字符串重复 n 次

"b".repeat(3)
1

# 3.4 padStart

进制转化

setInterval(function () {
  let date = new Date()
  let hour = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  let str = `${hour.toString().padStart(2, 0)}`
  str += `${minutes.toString().padStart(2, 0)}`
  str += `${seconds.toString().padStart(2, 0)}` // padStart padEnd
  console.log(str)
}, 1000)
1
2
3
4
5
6
7
8
9
10

← 五.函数 →