1.字符串的拼接

• 舉例：

let songs = [
    {name: '剛剛好1',singer: '薛之謙1'},
    {name: '剛剛好2',singer: '薛之謙2'},
    {name: '剛剛好3',singer: '薛之謙3'},
    {name: '剛剛好4',singer: '薛之謙4'},
    {name: '剛剛好5',singer: '薛之謙5'}
]
let html = '<div class="ct">'
html += '<h1>熱歌榜</h1><ul>'

let i
for(i = 0;i < songs.length;i++){
    html += '<li>'+ songs[i].name +' - '+ songs[i].singer +'</li>'
}
html += '</ul></div>'

document.body.innerHTML = html

2. jQuery方式 構(gòu)建 DOM 對象

let songs = [
    {name: '剛剛好1',singer: '薛之謙1'},
    {name: '剛剛好2',singer: '薛之謙2'},
    {name: '剛剛好3',singer: '薛之謙3'},
    {name: '剛剛好4',singer: '薛之謙4'},
    {name: '剛剛好5',singer: '薛之謙5'}
]
let $div = $('<div class="ct"></div>')
let $ul = $('<ul></ul>')

$(songs).each((index,item) => {
    let $li = $('<li>'+ item.name +'-'+ item.singer +'</li>')
    $ul.append($li)
})

$div.append('<h1>熱歌榜</h1>')
$div.append($ul)
$('body').append($div)

3. string formate

let songs = [
    {name: '剛剛好1',singer: '薛之謙1'},
    {name: '剛剛好2',singer: '薛之謙2'},
    {name: '剛剛好3',singer: '薛之謙3'},
    {name: '剛剛好4',singer: '薛之謙4'},
    {name: '剛剛好5',singer: '薛之謙5'}
]

function stringFormat (string) {
    // console.log(arguments)  // ["hi,{0}", "tian", callee: ?, Symbol(Symbol.iterator): ?]
    // 拿到arguments 除了第一項的其他項
    let parmas = [].slice.call(arguments,1)
    console.log(parmas) // ["tian", "yang"]

    // 將 string 中的 {n} 替換成 parmas{n}
    let regex = /\{(\d+)\}/g // 正則匹配 {n}
    string = string.replace(regex,function () {
        console.log(arguments)
        // 拿到 n 的下標
        let index = arguments[1]
        // 根據(jù)下標找到parmas里面的項
        return parmas[index]
    })

    return string
}


console.log(stringFormat('hi,{0} and {1}', 'tian','yang')) // 替換結(jié)果：hi,tian and yang