模板字符串的高级用法

// 模板字符串的使用
let msg = `Hello \`World`
// 可以直接原样输出
let message01 = `
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
`.trim();

// TODO: 模板字符串的嵌套
let arr = [{value: 1}, {value: 2}];
let message02 = `
    <ul>
        ${arr.map((item) => {
            return `
                <li>${item.value}</li>
                    `
            }).join('')}
    </ul>
`;

// TODO: 标签模板
function handleMessage(){

}

let x = 'Hi', y = 'Kevin';
var res = handleMessage`${x}, I am ${y}`;
console.log(res);

// TODO: 需求：实现message在书写的时候是换行的，输出字符是在一行？？？
let message03 = `
    Hi,
    Daisy!
    I am
    Kevin.
`;


function handleMessage(literals, ...values) {
    let res = '';
    for (let i = 0; i < values.length; i++) {
        res += literals[i];
        res += values[i];
    }

    res += literals[literals.length - 1];
    return res;
}

/**
 * 多行转换为一行文本
 * @param template 原始的模板字符串
 * @param expressions 模板字符串里面的表达式（计算后的结果）
 * @return {*}
 */
function oneLine(template, ...expressions) {
    console.log(template, expressions)
    let res = template.reduce((prev, next, i) => {
        // 默认从1开始
        console.log(i)
        let expression = expressions[i - 1];
        return prev + expression + next;
    })

    // 得到了已经和表达式合并之后的结果
    console.log('current res', res)

    // 将多个空白符如换行符、空格等替换成一个空格
    // res = res.replace(/(\s+)/g, ' ');
    res = res.replace(/(\n\s*)/g, ' ');
    // 去掉两边的空格
    res = res.trim();

    return res;
}
let msg01 = oneLine`
    Hi,
    ${1 + 1}
    Daisy!
    I am
    ${2 - 2}
    Kevin.
`;
console.log(msg01);



// 处理模板字符串中的函数处理结果
function includeArrays(template, ...expressions) {
    let result = template.reduce((prev, next, i) => {

        let expression = expressions[i - 1];

        if (Array.isArray(expression)) {
            expression = expression.join('');
        }

        return prev + expression + next;
    });

    result = result.trim();

    return result;
}