提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

浅聊：ES6模板字符串与一般字符串

ES6模板 字符串 一般 浅聊
2023-06-13 09:11:03 时间

大家好，又见面了，我是你们的朋友全栈君。

既然我已经踏上这条路，那么，任何事情都不应该妨碍我沿着这条路走下去。 —-康德

一.模板字符串与一般字符串区别 二.模板字符串的一些注意事项

一.模板字符串与一般字符串区别

1，认识模板字符串: 

<script>
'xiaozhang'		//一般字符串
`xiaozhang`		//模板字符串（用两个反引号裹着）
const username1 = 'xiaozhang';
const username2 = `xiaozhang`;

console.log(username1,username2,username1 == username2);		
//xiaozhang,xiaozhang,true
</script>

2，模板字符串与一般字符串的区别:

<script>
const person ={ 
   
    username:'小张',
    age:1,
    sex:'male'
};
//用一般字符串输出
const info = '我的名字：'+ person.username +',年龄：'+ person.age +'，岁了：'+ person.sex ;
console.log(info);

//模板字符串输出：
const info = `我的名字：${ 
     person.username},今年:${ 
     person.age}岁了,性别：${ 
     person.sex}`;
</script>

从上我们可以看出一般字符串有时很不方便，需多个引号、加号连接，不利于程序员书写，而模板字符串很好的克服了这一点。 同时注意到：在模板字符串中嵌入变量时，需要将变量名写在${}中（后面讲）。

二.模板字符串的一些注意事项

1，输出多行字符串：

<script>
//一般字符串
 const info = '第1行\n第2行';
 console.log(info);	
 //第1行
 //第2行
 </script>
<script>
//模板字符串
const info = `第1行\n第2行`;	//(方式一)
console.log(info);	
//第1行
//第2行

const info =`第1行 第2行`	//(方式二)
console.log(info);	
//第1行
//第2行
</script>

模板字符串中，所有的空格、换行或缩进都会被保留在输出结果之中

2，输出 ` 和 \ 等特殊字符

<script>
const info =`\``;	// \表示转义
console.log(info);	// `

const info1 = `\\`;	// \表示转义
console.log(info1);	// \
</script>

3，模板字符串的注入 在模板字符串中嵌入变量时，需要将变量名写在${}中

<script>
//小案例：
 const username = 'xiaozhang';
 const person = { 
   age:1,sex:'male'};
 const getSex = function(sex){ 
   
     return sex ==='male'?'男':'女';
 }
 const info = `${ 
     username},${ 
     person.age},${ 
     getSex(person.sex)}`;
 console.log(info);
 </script>

只要最终可以得出一个值的就可以通过${}注入到模板字符串中 文中若有不足之处还请指出！

传送门：一篇文章带你走进箭头函数

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/171849.html原文链接：https://javaforall.cn

相关文章