网站设置访问密码,国内重大新闻事件2024,网站开发建设准备工作,移动端网站seo一、模板字符串
模板字符串是可以插入表达式的字符串字面量。模板字符串和传统字符串比较#xff0c;存在以下特点#xff1a;
1、使用反单引号
传统字符串字面量使用单引号 ‘’ 或者双引号 “”#xff0c;模板字符串使用反单引号#xff08;backquote#xff09;
…一、模板字符串
模板字符串是可以插入表达式的字符串字面量。模板字符串和传统字符串比较存在以下特点
1、使用反单引号
传统字符串字面量使用单引号 ‘’ 或者双引号 “”模板字符串使用反单引号backquote
const str1 hello world
const str2 hello world
console.log(str1, str2, str1 str2)
// hello world, hello world, true2、插入表达式
模板字符串可以插入表达式通过 ${expression} 形式插入表达式 expression 可以是任意常量、变量、函数调用。在 ${expression} 前后也可以有任意的其他合法的字符例如 abc${expression}dfg 。最终${expression} 会转化为字符串和前后的字符串拼接如果有的话。 const person {name: 小明,age: 14,sex: 男
}// 传统字符串写法
const info 姓名是 person.name , 年龄是 person.age , 性别 person.sex// 模板字符串写法
// const info 姓名是${person.name}, 年龄是${person.age}, 性别${person.sex} console.log(info)
// 姓名是小明, 年龄是14, 性别男3、模板字符串可以有多行文本
模板字符串中所有的空格、换行或缩进都会被保存在输出中
// 一般字符串
const info 第一行\n第二行// 模板字符串
const info 第一行
第二行 // 注意不能有缩进console.log(info)
/*
第一行
第二行
*/二、字符串的新增方法
字符串的所有方法都不会改变原字符串
1、includes()、startsWith()、endsWith()
传统上JavaScript 只有 indexOf 和 lastIndexOf 方法可以用来确定一个字符串是否包含在另一个字符串中。
str.indexOf(str, [start]) 字符串索引返回检索字符在字符串中首次出现位置没有找的返回-1。从字符串开头开始start表示开始搜索的位置默认为0第一项。str.lastIndexOf(str, [start])字符串索引返回检索字符在字符串中首次出现位置没有找的返回-1。从字符串结尾开始start表示开始搜索的位置默认从array.length-1开始检索。
ES6 新增了三种方法
includes()返回布尔值表示是否找到了参数字符串。startsWith()返回布尔值表示参数字符串是否在原字符串的头部。endsWith()返回布尔值表示参数字符串是否在原字符串的尾部。
let s Hello world!s.startsWith(Hello) // true
s.endsWith(!) // true
s.includes(o) // true// 这三个方法都支持第二个参数表示开始搜索的位置。
s.startsWith(world, 6) // true
s.endsWith(Hello, 5) // true
s.includes(Hello, 6) // false2、repeat()
repeat() 方法返回一个新字符串表示将原字符串重复 n 次。
x.repeat(3) // xxx
hello.repeat(2) // hellohello
na.repeat(0) // 当 repeat 的参数不为正整数 和 0 时的情况
// 参数是小数会被取整
na.repeat(2.9) // nana// 参数是负数或者 Infinity会报错
na.repeat(Infinity) // RangeError
na.repeat(-1) // RangeError// 参数是 0 到-1 之间的小数则等同于 0。因为会先进行取整运算取整以后等于 -0repeat 视同为 0。
na.repeat(-0.9) // // 参数 NaN 等同于 0
na.repeat(NaN) // // 参数是字符串则会先转换成数字
na.repeat(na) //
na.repeat(3) // nanana3、padStart()、padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度会在头部或尾部补全返回补全后达到指定长度的字符串。
padStart(targetLength, [str])用于头部补全padEnd(targetLength, [str])用于尾部补全。targetLength 为字符串补全生效的最大长度 str 是用来补全的字符串默认为空格。
x.padStart(5, ab) // ababx
x.padStart(4, ab) // abaxx.padEnd(5, ab) // xabab
x.padEnd(4, ab) // xabax.padStart(4) // x
x.padEnd(4) // x // 如果原字符串的长度等于或大于最大长度则字符串补全不生效返回原字符串
xxx.padStart(2, ab) // xxx
xx.padEnd(2, ab) // xx// 如果用来补全的字符串与原字符串两者的长度之和超过了最大长度则会截去超出位数的补全字符串。
abc.padStart(10, 0123456789) // 0123456abc常见用途为数值补全指定位数、提示字符串格式、日期格式化
// 生成 10 位的数值字符串
1.padStart(10, 0) // 0000000001
12.padStart(10, 0) // 0000000012
123456.padStart(10, 0) // 000000001212.padStart(10, YYYY-MM-DD) // YYYY-MM-12
09-12.padStart(10, YYYY-MM-DD) // YYYY-09-12/*** 格式化日期* param {Object} date new Date()* param {Object} fmt 格式、YYYY年mm月dd日 HH:MM:SS*/
export const dataFormat (date, fmt) {let retconst opt {Y: date.getFullYear().toString(), // 年m: (date.getMonth() 1).toString(), // 月d: date.getDate().toString(), // 日H: date.getHours().toString(), // 时M: date.getMinutes().toString(), // 分S: date.getSeconds().toString() // 秒}for (let k in opt) {ret new RegExp(( k )).exec(fmt)if (ret) {fmt fmt.replace(ret[1], (ret[1].length 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, 0)))}}return fmt
}4、trimStart()、trimEnd()
trimStart() 和 trimEnd() 这两个方法它们的行为与 trim() 一致trimStart() 消除字符串头部的空格trimEnd() 消除尾部的空格。它们返回的都是新字符串不会修改原始字符串。
const s abc s.trim() // abc
s.trimStart() // abc
s.trimEnd() // abc除了空格键这两个方法对字符串头部或尾部的 tab 键、换行符等不可见的空白符号也有效。
浏览器还部署了额外的两个方法trimLeft() 是 trimStart() 的别名trimRight() 是trimEnd() 的别名。
5、at()
at() 方法接受一个整数作为参数返回参数指定位置的字符支持负索引即倒数的位置。
const str hello
str.at(1) // e 等价 str[1]
str.at(-1) // o str[-1] 返回 undefined
str.at(7) // undefined 等价 str[7]如果参数位置超出了字符串范围at() 返回 undefined。
