模板字符串的高级用法

``js // 模板字符串的使用 let msg =Hello `World// 可以直接原样输出 let message01 =

• 1
• 2

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

// 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 = oneLineHi, ${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;

} ```