es6 Template

[Yang03]

多行

` this 
  is
  test
`

模版

 let name = 'kobe', age = 36, sex ='man'
let  t = `my name  is ${name} , age: ${age}, sex: ${sex}`
console.log(t) // my name  is kobe , age: 36, sex: man

还可以这样用

let obj = {
    name: 'kobe',
    age: '36',
    sex: 'man'
}

let tem = ({name, age, sex}) => `
    my name  is ${name} , age: ${age}, sex: ${sex}
`
console.log(tem(obj))

const b = [1,2,3,4,5,6];

function temp() {
  return b.filter((value, index) => index < 4).map((value, index) => [`<li>`,`<a>${value}</a>`,`</li>`].join(''));
}

const a = [1,2,3,4,5,6];

function template() {
  return `${(a.map((value, index) => {if (index < 5) return `<li>${index}</li>`}))}`
}

console.log(template())

const b = [1,2,3,4,5,6];

function temp() {
  return b.map((value, index) => `${(index < 4 ? `<li>${value}</li>` : '')}`).join(',');
}

console.log(temp())

const c = {f: function(){
 console.log(this.name) 
}}

const d = {name: '1111'}

d::c.f()

[Yang03]

function h(strings, ...values) {
    /**
     * strings ['my name is', 'years old']
     * values ['kobe', '37']
     */
    let result = strings[0]
    for (let i = 0, len = strings.length-1;  i < len; i++) {
        ret += escapeHtml(values[i]) + strings[i+1]
    }
    return ret
}

const $DIV = $('<div>')
function escapeHtml(string) {
    var str = '' + string;
    return $DIV.empty().text(string).html()
}

const name = 'kobe'
const age = '37'
const template = h`my name is ${name}, ${age} years old`

[Yang03]

const template = function (url, params) { const names = Object.keys(params); const vals = Object.values(params); // eslint-disable-next-line return new Function(...names, return \${url}`;`)(...vals); };