昨天学习了字符串对象和字符串的表示,就是利用utf-8等不同的编码方式,还有许多的对象方法,都是处理字符串的方法,挺方便的,今天我学习了一下字符串模板,这里记录i一下学习的笔记,当然,今天学习了部分内容,如果笔记有没涉及到的,可以再自行学习,话不多说,这次笔记分为两部分:

1.传统的字符串输出

2.字符串模板

  正文开始:

1.传统的字符串输出

  1. 1 //传统的字符串输出模板就是字符串的连接问题,无非就是字符串与字符串之间用+号连接,然后其中还有一部分就是转义字符,必须由转义字符控制模板
  2. 2 let a = 1;
  3. 3 'this is' +a+'\nabcd ' //该句话就表示有个a的值和一个换行符号在其中控制着该输出的字符串
  4. 4 //结果:
  5. 5 // this is 1
  6. 6 //abc
  1.  

2.字符串模板

  1. 1 //看完传统的字符串的输出模板,你会发现写个变量还要加加加,还需要转义字符来控制,想当的烦恼,而字符串模板的引入就是为了解决这个问题
  2. 2 //1.字符串模板是利用 ` 来定义的,可以定义多行字符,当然也可以镶嵌变量,模板可以换行和空格,还有缩进。
  3. 3 //(1)镶嵌变量${变量}
  4. 4 var name = "andy";
  5. 5 console.log(`my name is ${name}`); // 输出的就是my name is andy 镶嵌变量
  6. 6 //(2)模板可换行
  7. 7 console.log('one line \n two line') // 输出可想而知,传统字符串输出
  8. 8 console.log(`one line
  9. 9 two line` ) // 与上面传统输出一样,但是写法不一样
  10. 10 //(3)模板字符串里面想用``
  11. 11 var a = `you \` moban\`zifuchuan` //you `moban` zifuchuan;
  12. 12 //(4)不想用换行可以用trim方法消除
  13. 13 ${'.ac'}/html(`
  14. 14 <li>one<\li>
  15. 15 <li>two<\li>
  16. 16 `.trim());
  17. 17 //(5)大括号里面可以放置对象属性(调用对象的时候,默认调用对象的toString方法)或者运算式,或者js的表达式
  18. 18 let x =1;
  19. 19 let y = 2;
  20. 20
  21. 21 `${x} + ${y} = ${x+y}`; /1+2 =3;
  22. 22 //(6)模板字符串中可以调用函数
  23. 23 function f(){
  24. 24 return "hellow";
  25. 25 }
  26. 26
  27. 27 `foo ${f()} bar`;
  28. 28 //(7)模板字符串里大括号里面还是字符串仍旧输出字符串
  29. 29 //(8)模板字符串中的变量或者函数没定义仍旧会报错
  30. 30 //(9)模板字符串可以嵌套(无非就是模板里面套模板一样一样的)


  今天模板字符串就简单学习这么多吧,具体还有字符串模板,还有对应的新的方法、当然任何都不是绝对完美的,想了解的可以查阅一下模板字符串的缺点,但是相对于传统的字符串肯定要好很多,如果有其他想要一起探讨的可以下面评论,比如没提到的知识,可以在评论区增加!!明天也要努力呀!!

ES6-字符串-模板字符串(复习+学习)的更多相关文章

  1. JavaScript——字符串——模板字符串

    JavaScript--字符串--模板字符串 字符串可以用反引号包裹起来,其中的${expression}表示特殊的含义,JavaScript会将expression代表的变量的值和反引号中的其它普通 ...

  2. ES6多行字符串+模板字符串

    多行字符串 最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ` ... ` 表示: 'use strict'; // 如果浏览器支持模板字符串,将会替换字符串内部的变量: var name ...

  3. ES6扩展——模板字符串

    ${ } 模板字符串占位符 需要用反引号` ` 1.模板字符串 `${变量}` const xiaoming = { name:'xiaoming', age:14, say1:function(){ ...

  4. ES6(模板字符串,三点运算符,Symbol,iterator接口)

    模板字符串 作用:简化字符串的拼接 模板字符串必须用``包含 变化的部分使用${xxx}包含 对象的简写方式 同名的属性可以省略不写 可以省略函数的function 箭头函数 箭头函数的特点 箭头函数 ...

  5. 深入浅出ES6(四):模板字符串

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...

  6. ES6模板字符串

    ES6支持模板字符串,简单写法如下 //html界面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  7. es6 字符串模板拼接和传统字符串拼接

    字符串拼接是在日常开发中必不可少的一个环节. 注意:字符串可以用单引号'',或者""双引号,出于方便大家理解,文章以下内容统一使用单引号''! 如果只是一个字符串和一个变量拼接,使 ...

  8. kotlin基础 字符串模板

    ${变量名} var tmp="字符串模板” print("今天学习${tmp}这个知识点")

  9. Vue组件template模板字符串几种写法

    在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...

  10. es6学习笔记--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

随机推荐

  1. ~/.emacs emacs 配置文件

    windows ~/.emacs (when (>= emacs-major-version 24) (require 'package) (add-to-list 'package-archi ...

  2. nginx rewrite重写规则集合

    本文根据网络搜索整理,不是原创 一.正则表达式匹配,其中: ~ 为区分大小写匹配 ~* 为不区分大小写匹配 !~和!~* 分别为区分大小写不匹配及不区分大小写不匹配 . 匹配除换行符以外的任意字符 \ ...

  3. GUI编程笔记

    GUI编程 告诉大家该怎么学? 这是什么? 它怎么玩? 该如何去我们平时运用? 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事件 破解工具 1.简介 GUi的核心技术:Sw ...

  4. 吴恩达--神经网络-week1-hw4

    # Ref: https://blog.csdn.net/u013733326/article/details/79767169 import numpy as np import testCases ...

  5. 通过Git在本地局域网中的两台电脑间同步代码

    0.前言 一般情况下同步代码可以通过在GitHub/GitLab等网站新建远程仓库,所有机器都向仓库推送或者从仓库下拉更新. 上述过程步骤也不算复杂,不过有时候我们考虑到仓库的安全性等因素,只想在局域 ...

  6. kubelet源码分析——监控Pod变更

    前言 前文介绍Pod无论是启动时还是关闭时,处理是由kubelet的主循环syncLoop开始执行逻辑,而syncLoop的入参是一条传递变更Pod的通道,显然syncLoop往后的逻辑属于消费者一方 ...

  7. 简单Tab切换

    延迟Tab切换,使用css中的flex布局,原生js实现.(京东首页菜单也有此延迟功能哦!) 每天进步一丢丢~~ 1.延迟Tab切换 <!DOCTYPE html> <html la ...

  8. 从零入门 Serverless | SAE 的极致应用部署效率

    作者 | 文俊 阿里巴巴云原生团队 本文整理自<Serverless 技术公开课>,"Serverless"公众号后台回复"入门",即可获取系列文章 ...

  9. 试题 算法训练 最大最小公倍数 java题解

    资源限制 时间限制:1.0s   内存限制:256.0MB 问题描述 已知一个正整数N,问从1~N中任选出三个数,他们的最小公倍数最大可以为多少. 输入格式 输入一个正整数N. 输出格式 输出一个整数 ...

  10. pycharm设置文件中显示模板内容

    pycharm中设置自己的文件模板  File>>Settings>>Editor>>File and Code Templates 选择文件类型或者输入文件类型 ...