一分钟让你学会模板字符串

古城微笑少年丶 2022-12-15 14:28 124阅读 0赞

模板字符串是ES6中增强版的字符串，用反引号(\`)标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量，在模板字符串中嵌入变量，需要将变量写在$\{\}中

// 普通模板字符串
    `In JavaScript '\n' is a line-feed`;
    // 多行模板字符串
    `In JavaScript '\n' is a line-feed`;
    // 字符串中嵌入变量
    var lang = 'JavaScript', content = 'line-feed';
    `In ${ lang} '\n' is a ${ content}`;

模板字符串是包含在反引号中的，如果字符串中需要有反引号，则在其前面要用反斜杠转义

`Hello \`world\`!`; // "Hello `world`!"

如果使用模板字符串表示多行字符串，**所有的空格和缩进都会保留在输出中**，如果不想要头尾的空白符，可以使用trim方法消除。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]  
       模板字符串的大括号里可以放入任意的javaScript表达式，可以进行运算，以及引用对象属性，还可以调用函数。

function fn(){ 
    	return 1 + 2;
    }
    'the return of fn() is ${ fn()}`; // the return of fn() is 3

如果大括号中的值不是字符串，将按照一般的规则转为字符串，比如，大括号中是一个对象，将默认调用对象的toString方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 1]  
       如果需要引用模板字符串本身，可以像下面写

let str = "`hello world`",
    	fn = "(name) => `Hello ${name}`";

小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/8d1b54c933ce4fac8866548fc168f680.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a7f72263e8384018a0710e64c06b9930.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/4d6ebb1a079a4e7dad3b7b5b40cc975c.png