es5与es6常用语法教程(3)

作者: 光强_上海 | 来源:发表于2017-11-01 00:45 被阅读154次

    js常用语法系列教程如下

    这部分教程我们主要讲解以下几个常用语法

    • 模板字符串
    • 带标签的模板字符串
    • 判断字符串中是否包含其他字符串
    • 给函数设置默认值

    模板字符串

    • 老式的拼接字符串方法
    let dessert = '🍰', drink = '🍵'
    
    let breakfast = '今天的早餐是 ' + dessert + ' 与 ' + drink + ' !'
    
    console.log(breakfast) // 输出:今天的早餐是 🍰 与 🍵 !
    
    • 模版字符串拼接方法
    let dessert = '🍰', drink = '🍵'
    
    let breakfast  = `今天的早餐是 ${dessert} 与 ${drink} !`
    
    console.log(breakfast) // 输出:今天的早餐是 🍰 与 🍵 !
    

    模板字符串使用方法

    • 在变量的周围添加一组{}
    • {}左边添加一个$
    • 再用反引号包裹这个字符串

    带标签的模块字符串

    let dessert = '🍰', drink = '🍵'
    
    let breakfast = kitchen`今天的早餐是${dessert} 与 ${drink}!`
    
    function kitchen(strings, ...values){
      console.log(strings) // 输出:["今天的早餐是", " 与 ", "!"]
      console.log(values) // 输出:["🍰", "🍵"]
    }
    
    breakfast
    
    • strings:是一个数组,元素是模板字符串中的字符串片段
    • values:是一个数组, 元素是模块字符串中使用{}包裹的内容
    • 在模块字符串的前面添加一个标签,这个标签处理模块字符串中的字符和插入的值,这里的标签是一个函数

    判断字符串中是否包含其它字符串

    • startsWith():判断一个字符串是否以某一个字符串开头
    • endsWith():判断一个字符串是否以某一个字符串结尾
    • includes():判断一个字符串是否包含某一个字符串
    let dessert = '🍰', drink= '🍵'
    
    let breakfast = `今天的早餐是 ${ dessert } 与 ${ drink } !`
    
    console.log(
      breakfast .startsWith('今天'), // 输出:true
      breakfast .endsWith('!'), // 输出:true
      breakfast .includes('早餐是') // 输出:true
    )
    

    给函数设置默认值

    function breakfast (dessert = '🍰', drink = '🍺') {
      return `${ dessert }${ drink }`
    }
    
    // 这里 🍰和 🍺是函数breakfast设置的默认参数值,当调用这个函数时没有给参数时,这时就会使用函数默认的参数值
    
    // 调用函数
    breakfast () // 输出:🍰 🍺
    breakfast (🍌, 🍊) // 输出:🍌 🍊
    

    福利时间

    • 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发):https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
    • 作者简书主页:包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们:多多关注多多点赞)
    • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
    • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢支持!

    相关文章

      网友评论

        本文标题:es5与es6常用语法教程(3)

        本文链接:https://www.haomeiwen.com/subject/ckfwpxtx.html