ES6 - 模板字符串与箭头函数

最新推荐文章于 2024-04-19 08:06:37 发布

CLAM-

最新推荐文章于 2024-04-19 08:06:37 发布

阅读量276

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_42306826/article/details/115560132

版权

1.模板字符串的使用

字符串和其他东西一块使用的时候，方便注入

const username1 = 'zhangsan';
        const username2 = `zhangsan`;
        console.log(username1, username2);//zhangsan zhangsan
        console.log(username1 === username2);//true
        const person = {
   
            username: 'zhangsan',
            age: 18,
            sex: 'nan',
        }
        const info = '我的名字是：' + person.username + '年龄是：' + person.age + '性别是：' + person.sex;
        console.log(info);//我的名字是：zhangsan年龄是：18性别是：nan
        const info1 = `我的名字是：${
     person.username}年龄是：${
     person.age}性别是：${
     person.sex}`;
        console.log(info1);//我的名字是：zhangsan年龄是：18性别是：nan

2.模板字符串的注意事项

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

  		//一般字符串
        const info = `第一行\n第二行`;
        //模板字符串
        const info1 = `第一行
第二行`;
        console.log(info);
        //第一行
		//第二行
        console.log(info1);
        //第一行
		//第二行

输出`和\等特殊字符

        const info2 = `\`\\`
        console.log(info2);//   `\

模板字符串的注入
只要最终可以得出一个值的就可以通过模板字符串${}注入到模板字符串

		// ${}
 		const username = 'zhangsan';
        const person = {
   
            sex: 'nan',
            age: 18
        };
        const handle = function(sex) {
   
            return sex === 'nan' ? '男' : '女';
        }
        const info3 = `${
     username},${
     person.age+2},${
     handle(person.sex)}`;
        console.log(info3);//  zhangsan,20,男

3.模板字符串的应用

<!DOCTYPE html>
<html lang=

最低0.47元/天解锁文章

CLAM-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 - 模板字符串与箭头函数

1.模板字符串的使用字符串和其他东西一块使用的时候，方便注入const username1 = 'zhangsan'; const username2 = `zhangsan`; console.log(username1, username2);//zhangsan zhangsan console.log(username1 === username2);//true const person = { usern
复制链接

扫一扫

专栏目录