zoukankan      html  css  js  c++  java
  • es6模板字符串

    字符串拼接是开发时一个必不可少的环节,也是很恶心的一个环节,尤其是又臭又长的html字符串拼接。

    为什么说html字符串拼接很恶心呢,主要有以下几点:

    1. 传统的字符串拼接不能正常换行
    2. 传统的字符串拼接不能友好的插入变量
    3. 传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。

    es6的模板字符串解决了以上问题

    es6 使用``(windows键盘英文输入法下tab键上面那个键)来定义一个字符串。

    var s = `hello world`

    我们通常这样拼接html字符串。

    var html = '<ul>'+
    '<li>1</li>'+
    '<li>2</li>'+
    '</ul>'

    如果html标签里面有其他的引号,那就更恶心了,但是,使用es6,只需要这要就ok了。

    var html = `<ul>
    <li>1</li>
    <li>2</li>
    </ul>`

    在windows键盘上,``是英文输入法下tab按键上面那个键。

    它同样支持变量的嵌套,甚至功能更加强大

    var s1 = `hello vue`;
    `xxx ${s1} xxx` //xxx hello vue xxx

    {}里面可以插入任何js表达式,还可以是一个对象、数组,甚至是一个函数。

    对象或者数组会调用它们的todtring()方法

    var obj = {a:1,b:2};
    `xxx ${obj} xxx`//xxx [object Object] xxx
    var arr = [1,2,3];
    `xxx ${arr} xxx`//xxx 1,2,3 xxx

    函数分两种情况:

    1. 函数本身,同样会调用它的tostring()方法
    2. 直接调用函数,则输出函数的返回值
    var fn1 = function(){
    console.log('hello vuex');
    }
    var fn2 = function(){
    return 'hello vue-router'
    }
    `xxx ${fn1}`//xxx function fn(){....}
    `xxx ${fn1()}`//xxx underfind
    `xxx ${fn2()}`//xxx hello vue-router

    如果{}里面的变量是个不存在的变量呢?

  • 相关阅读:
    BOM
    no response from Graphic Screen Painter Exiting
    Windows Mobile 中模拟按键
    C# 获取汉字拼音首字母
    Web Service介绍
    .net/c#中栈和堆的区别及代码在栈和堆中的执行流程详解
    使用JSON加速AJAX(By Sean Kelly)
    Sql字符串操作函数
    一个简单AJAX注册示例
    .Net平台开发的技术规范与实践精华总结
  • 原文地址:https://www.cnblogs.com/newze/p/7535470.html
Copyright © 2011-2022 走看看