字符串和模板字符串

模板字符串是``包裹起来的东西，是es6的语法，
这个我目前是很少用的，之前在react里面用了一次，但也不知道到底是为什么。这里解一下惑。其实用这个呢主要是因为html不区分大小写，我们在写组件的时候使用模板字符串包裹一下，这样就避免了写组件html模板（也就是<template>的代替）时换行。在模板字符串中使用组件就避免了驼峰法-法的转换（后者还要用用）问题，但是呢，要注意我们在使用vue的template时就是默认用了字符串模板。不需要我们手动加`。

官网原话：
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

实际使用中，建议不要使用这个，因为部分浏览器在解析的时候还是会出现混乱的bug，IDE 仍然会通过语法高亮、tab 格式化、换行符等地方的问题折磨着你。所以还是老实点吧，除非是像react里面注册组件时必须套一下，其他的时候还是免了吧。
模板字符串的优点：主要是换行上
传统的JavaScript语言，输出模板通常是这样的写的。

$('#result').append('There are <b>' + basket.count + '</b> ' +'items in your basket, ' +'<em>' + basket.onSale +'</em> are on sale!');

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$('#result').append(`There are <b>${basket.count}</b> itemsin your basket, <em>${basket.onSale}</em>are on sale!`);

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

// 普通字符串
`In JavaScript '\n' is a line-feed.`// 多行字符串
`In JavaScript this isnot legal.`console.log(`string text line 1
string text line 2`);// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

let greeting = `\`Yo\` World!`;
输入结果：`Yo` World!

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul><li>first</li><li>second</li>
</ul>
`);

代码来自https://www.cnblogs.com/gaoya666/p/9071035.html
字符串和模板字符串和VUE里组件注册与使用时驼峰法-法的转换

字符串和模板字符串相关推荐

ES6_04- 模板字符串+标签模板字符串
系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用文章目录系列文章目录 1. 模板字符串 1.1. 写法 ...
[译]JavaScript:ES6中的模板字符串简介
原文:http://tc39wiki.calculist.org/es6/template-strings/ ES6中的模板字符串(template string)是一种能在字符串文本中内嵌表达式的字 ...
ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
TypeScript入门教程之模板字符串
TypeScript入门教程之模板字符串模板文字(模板字符串) 从语法上讲,这些是使用反引号(即`)而不是单引号(')或双引号(")引号的字符串.Template Literals的动 ...
学习js的第八天【模板字符串】
一.模板字符串 1.用反引号创建的字符串叫模板字符串 var str=`helloword` 2.模板语法:`${变量}` var message='word' var str='hello':`${ ...
前端与移动开发----JS高级----面向对象编程，类与实例对象，继承，严格模式，模板字符串，class封装tab栏
JS高级01 回顾上阶段 Javascript组成 ECMAScript: 基础语法 (变量, 表达式, 循环, 判断, 函数, 对象等) DOM: document 操作标签(获取, 增加, 插入, ...
高级JavaScript #ES6(模板字符串,let,箭头函数,forof,参数增强,解构,class,promise)
模板字符串 1.模板字符串: 只要拼接字符串都用模板字符串代替+a.整个字符串包裹在一对儿反引号 ` ` 中b.反引号``中支持换行 c.反引号中需要动态生成的内容必须放在${}里d. ${}里: ...
模板字符串（vue.js笔记）
1..什么是模板字符串 ? 模板字符串:是允许嵌入表达式的字符串(可以使用多行字符串和字符串插值功能) 2.语法: 模板字符串用``号来放入 let str = `这是一个模板字符串`; 实例: &l ...
JavaScript模板字符串
JS模板字符串 1. 什么是模板字符串 ? 2. 模板字符串的用法 3. 模板字符串标签函数 1. 什么是模板字符串 ? 模板字符串:是允许嵌入表达式的字符串(可以使用多行字符串和字符串插值功能) 它 ...

字符串和模板字符串

字符串和模板字符串相关推荐

最新文章

热门文章

字符串 和模板字符串

字符串 和模板字符串相关推荐

最新文章

热门文章

字符串和模板字符串

字符串和模板字符串相关推荐