ES6模板字符串花样使用（循环，判断）

Posted 2023-03-08

参考技术A

注意：主要是map的使用，需要用map,将值return出去，如果使用foreach则不报错一直返回undefined

注意：不要直接循环最外层div，只能有一个根节点，循环拼接即可

javascript ES6 - 里面有模板字符串循环的模板字符串

const dogs = [
    { name: 'Snickers', age: 2 },
    { name: 'Hugo', age: 8 },
    { name: 'Sunny', age: 1 }
];

const markup = `
    <ul class="dogs">
        ${dogs.map(dog => `
            <li>
                ${dog.name}
                is
                ${dog.age * 7}
            </li>`).join('') // Add 'join' to remove the comma behind each item
        }
    </ul>
`;

document.body.innerHTML = markup;