这是以前的字符串。。双引号,单引号。毫无区别

有时候在字符串里面写一些标签。

排版不好看 我就想回车一下。这样写虽然是好看。但是语法就报错了。es5的字符串不支持换行。我只想是想让它排版的好看一点。

js想的一个法子是在每一行加一些斜线用来转义


那么这样的代码有没有问题呢?再写一个一样的字符串。然后在后面加上多个空格,这就不是在结尾的地方加了斜线
这里最大的问题是,如果你后面有空格,你的人眼是看不出来的


这样就会报语法错误。

想要找到后面有没有空格要找很久,除非你在每一个地方双击一下

这里双击有空格

用加号的形式,但是每一行代码都要用双引号,

es6的语法糖,反引号。

每一行后面都是回车,没有空格的

附赠功能,

把我是一个好人放在两个p之间

用replace的方式

另外一种方式。通过控制加号的排版,来达到整体排版

把变量插到字符串里面-字符串插值

2



加一个函数来处理。函数后面马上接着这个新的字符串


可以看到这个函数是三个参数。

这是第一个参数,

第一个参数就是三个字符串的数组,
第二个参数是第一个变量,
第二个参数是第二个变量。


把name改成圆圆


也就是说在模板字符串前面加函数,可以让你又一次机会根据插入的变量的值来修改这个模板字符串。最终是否要展示啥。
原本你是要展示圆圆是一个人,现在输出的就是圆圆是一个坏人,因为这个函数里去做了一个判断。

这有什么用?

如果你用React那么就会用到一个非常注明的库叫做 styled-component

https://github.com/styled-components/styled-components
我们来看他的语法。styled.h1 这个h1就是一个函数。你一旦调用styled.h1那么你后面就要给我一个多行字符串。
它会把里面的css作为内联样式写到一个h1的标签里面。然后把h1标签的字符串返回回来。

结束

ES6深入浅出-3 三个点运算 & 新版字符串-2. 新版字符串的更多相关文章

  1. ES6深入浅出-3 三个点运算 & 新版字符串-1.函数与对象的语法糖

    主要讲的内容 时间充裕的话就讲,模板字面量 默认参数值 首先讲es6之前,我们是怎么做的.例如我们要写一个求和的函数, 请两个参数的和,但是如果有的人就是穿一个参数呢? 那么b没有传值,b的值是多少呢 ...

  2. ES6深入浅出_汇总贴

    H:\BaiDu\ES6深入浅出-wjw ES 6 新特性一览:https://frankfang.github.io/es-6-tutorials/ 我用了两个月的时间才理解 let https:/ ...

  3. es6新语法系列,查找字符串,模板字符串

    一.模板字符串: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与 ...

  4. 三张图彻底了解Java中字符串的不变性

    转载: 三张图彻底了解Java中字符串的不变性 定义一个字符串 String s = "abcd"; s中保存了string对象的引用.下面的箭头可以理解为"存储他的引用 ...

  5. 函数原型属性-JavaScript深入浅出(三)

    前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了this深入浅出 ...

  6. 原型那些事 - JavaScript深入浅出(三)

    前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了this深入浅出 ...

  7. Java开发笔记(三十七)利用正则串分割字符串

    前面介绍了处理字符串的常用方法,还有一种分割字符串的场景也很常见,也就是按照某个规则将字符串切割为若干子串.分割规则通常是指定某个分隔符,根据字符串内部的分隔符将字符串进行分割,例如逗号.空格等等都可 ...

  8. Python第三天 序列 5种数据类型 数值 字符串 列表 元组 字典 各种数据类型的的xx重写xx表达式

    Python第三天 序列  5种数据类型  数值  字符串  列表  元组  字典 各种数据类型的的xx重写xx表达式 目录 Pycharm使用技巧(转载) Python第一天  安装  shell ...

  9. ES6新特性三: Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

随机推荐

  1. java中的String要点解析

    String类使我们经常使用的一个类,经常用来表示字符串常量. 字符串一旦被创建赋值,就不能被改变,因为String 底层是数组实现的,且被定义成final类型.我们可以看String源码. /** ...

  2. STAF Trust Level 4 required for FS copy request

    C#中使用STAF从本机传输文件到远程的电脑,出现如下错误: 解决方法: 修改service.ini文件,添加信任IP段,并将trust level 设置为5,修改后文件内容如下 trace enab ...

  3. 华东交通大学 2019 I 不要666 数位dp进阶

    Problem Description 题库链接 666是一个网络用语,用来形容某人或某物很厉害很牛.而在西方,666指魔鬼,撒旦和灵魂,是不吉利的象征.所以邓志聪并不喜欢任何与6有关的数字.什么数字 ...

  4. 洛谷 P1439 【模板】最长公共子序列 题解

    每日一题 day40 打卡 Analysis 因为两个序列都是1~n 的全排列,那么两个序列元素互异且相同,也就是说只是位置不同罢了,那么我们通过一个book数组将A序列的数字在B序列中的位置表示出来 ...

  5. Jenkins 更改工作目录;

    更改 Jenkins 工作目录:如果使用 tomcat 加载的 war包形式启动 默认配置文件 /root/.jenkins  Jenkins 默认配置文件 /root/.jenkins/config ...

  6. web表单

    1.配置 使用Flask-WTF, 它集成了WTForms并且完美地集成到了flask. 在microblog根目录下创建一个文件,存储flask扩展的所有配置,CSRF_ENABLED用于激活跨站点 ...

  7. Angular实战项目(1)

    Angular 打造企业级协作平台 [外链图片转存失败(img-J0HrPiEG-1563902660799)(https://upload-images.jianshu.io/upload_imag ...

  8. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  9. 无法将“Scaffold-DbContext”项识别为 cmdlet、函数、脚本文件或可运行程序的名称...

    原文链接:https://my.oschina.net/taadis/blog/889560 为什么80%的码农都做不了架构师?>>>     PM> Scaffold-DbC ...

  10. mysql group by 报错 ,only_full_group_by 三种解决方案

    报错信息  Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'data ...