ES5与ES6常用语法教程之 ③模板字符串判断字符串是否包含其它字符串

Posted 2020-11-14 itgezhu

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

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

模板字符串

• 老式的拼接字符串方法

• 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 (??, ??) // 输出：?? ??