Skip to content

Latest commit

 

History

History
211 lines (161 loc) · 5.15 KB

04. 字符串模板引擎.md

File metadata and controls

211 lines (161 loc) · 5.15 KB
Raw

字符串模板引擎

1. 多行字符串

// 传统的JavaScript
var name = '黑子'
var age = 8
$('#result').append(
  '我的宠物狗叫 <b>' + name + '</b>\n' +
    '今年\n' +
    '<em>' + age+ '</em>岁，\n'+
  '十分可爱!'
)
// ES6
let name = '黑子'
let age = 8
$('#result').append(
  `我的宠物狗叫 <b>${name}</b>
    今年 
    <em>${age}</em>岁，
  十分可爱!`
)


2. 字符串中嵌入变量

// ES5
const age = 8
const message  = '我的宠物狗叫黑子，今年' + age*2 + '岁了'

// ES6
const age = 8
const message  = `我的宠物狗叫黑子，今年 ${age*2} 岁了`
既然占位符是JS表达式，还可以轻易嵌入运算符、函数调用等：
const age = 8
const message = `我的宠物狗叫黑子，今年 ${(age*2).toFixed(2)} 岁了`

function fn() {
  return "小黄"
}
`我朋友家的宠物叫${fn()}`

3. 带标签的模板字符串

3.1 定义标签
let  name = '黑子',
     age = 8,
     message = tag`我的宠物狗叫${name}，今年${age}岁了`;

function tag(stringArr, value1, value2) {
    console.log(stringArr);  //["我的宠物狗叫", "，今年", "岁了", raw: Array(3)]
                             //该数组有一个raw属性，保存的是转义后的原字符串
    console.log(value1);     // 黑子
    console.log(value2);     // 8
    return;
}

// 标签函数通常使用不定参数特性来定义占位符，从而简化数据处理的过程
function tag(stringArr, ...values) {
	console.log(values); //  ["黑子", 8]
}
3.2 实际应用

  • 过滤HTML字符串，防止用户输入恶意内容

    let message =  filterHTML`<p>${sender} 你好啊</p>`
function filterHTML(templateData) {
  let s = templateData[0]
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i])
    // 转义占位符中的特殊字符。
    s += arg.replace(/&/g, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">")
    // 不转义模板中的特殊字符。
    s += templateData[i]
  }
  return s
}

// sender变量往往是用户提供的，经过filterHTML函数处理，里面的特殊字符都会被转义
var sender = '<script>alert("买了个包")</script>' // 恶意代码
var message = filterHTML`<p>${sender} 你好啊</p>`

console.log(message)
// <p><script>alert("买了个包")</script>  你好啊</p>

  • 多语言转换

    let name = 'ES6专栏 ';  let  number = 666;  
let chinese = ['欢迎访问','您是第','位访问者']

i18n`Welcome to ${name}, you are the ${number}  visitor`

function i18n(stringArr, ...values){
    let str=''
    stringArr.map((item,index)=>{
        str += (chinese[index] +  (values[index] ? values[index] : '' ))   
    });
    console.log(str) 
}
//欢迎订阅ES6专栏 您是第666位访问者

4. 新增的字符串方法

4.1 查找字符串
var msg = "Hello world!"

msg.startsWith("Hello")      // true
msg.endsWith("world!")       // true
msg.includes("d")            // true
// 第二个参数后，includes 和 startsWith 会以该索引为起始点进行匹配
msg.includes("d", 8)          // true
msg.includes("d", 11)         // false
msg.startsWith("d", 10)       // true
msg.startsWith("d", 9)        // false
// endsWith 将字符串的长度与参数值相减并将得到的值作为检索的起始点
console.log(msg.endsWith("d", 11)         // true ( 长度13 - 参数值11 = 起始点2 )
console.log(msg.endsWith("d", 8)          // false ( 长度13 - 参数值8 = 起始点5 )
应用场景

  • 利用includes检查用户使用的浏览器

    if (navigator.userAgent.includes('Chrome')) {
     console.log("是谷歌浏览器")
} else {
      console.log("不是谷歌浏览器")
}

  • 利用startsWith检查路径

    let urlstr = "http://www.baidu.com"
let urlstr1 = "file:///C:/Users/xxx.html"
console.log(urlstr.startsWith("https://"))    //false
console.log(urlstr1.startsWith("file://"))     //true

  • 利用startsWith检查文件格式

    let path = "111.jpg"
console.log(path.endsWith(".png"))   //false
4.2 重复字符串

​ repeat方法，接受一个数字参数作为字符串的重复次数，返回一个重复包含初始字符串的新字符串

console.log("abc".repeat(4))       // "abcabcabcabc"

let str = "小样儿"
console.log(str.repeat(5))     //小样儿小样儿小样儿小样儿小样儿
4.3 填充字符串

​ string.padStart 往字符串前面填充

let str = "Iphone"
let leftStr = "我的"
console.log(str.padStart(str.length + leftStr.length, leftStr))  //我的Iphone

​ string.padEnd 往字符串后面填充

let iphone = "Iphone"
let rightStr = "10"
console.log(iphone.padEnd(iphone.length + rightStr.length, rightStr))  //Iphone10