ES6——模板字符串

语法

`...${...}...`

变量的嵌套

var s1 = `hello vue`;
`xxx ${s1} xxx` //xxx hello vue xxx

${}里面可以插入任何js表达式,还可以是一个对象、数组,甚至是一个函数。

对象或者数组会调用它们的tostring()方法

var obj = {a:1,b:2};
`xxx ${obj} xxx`//xxx [object Object] xxx
var arr = [1,2,3];
`xxx ${arr} xxx`//xxx 1,2,3 xxx

函数分两种情况:

  • 函数本身,同样会调用它的tostring()方法
  • 直接调用函数,则输出函数的返回值
var fn1 = function(){
console.log('hello vuex');
}
var fn2 = function(){
return 'hello vue-router'
}
`xxx ${fn1}`//xxx function fn(){....}
`xxx ${fn1()}`//xxx underfind
`xxx ${fn2()}`//xxx hello vue-router

如果{}里面的变量是个不存在的变量呢?

> `xxx ${sss}`
Uncaught ReferenceError: sss is not defined at <anonymous>

模板字符串甚至还能嵌套。


字符串的拓展

  • 1.字符串的Unicode表示法
  • 2.includes()、startsWith()、endsWith()
  • 3.repeat
  • 4.模板字符串

字符串的Unicode表示法

// js有6种方法表示一个字符
'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

包含字符判断方法

includes()、startsWith()、endsWith()
传统的只有indexOf()方法确定一个字符串是否包含在另一个中

vas s = 'hello world'
s.includes('o') // true
s.startsWith('h') // true
s.endsWith('d') // true
// 第二个参数
s.startsWith('world', 6) // true
s.endsWith('hello', 5) // true
s.includes('hello', 6) // false
//使用第二个参数时endsWith的表示针对前n个字符,其他两个针对从第n个位置到字符串结束位置之间的字符

repeat

repeat方法返回一个新字符串,将原字符串重复n次

'x'.repeat(3) // 'xxx'
'xx1'.repeat(0) // ''
'xx1'.repeat(2.9) // 'xx1xx1' 小数直接取整
'xx'.repeat(-2) // RangeError 参数是负数或者Infinity报错
'xx'.repeat(-0.7) // '' 参数(-1,0) 等同于0 因为会进行取整为 -0
'xx'.repeat(NaN) // '' 参数NaN等同于0
'xx'.repeat('nn') // '' 参数字符串会先转换为数字 'nn'=>NaN

字符串补全

padStart() padEnd()
第一个参数是指定字符串的最小长度,第二个参数是用来补齐的字符串

'x'.padStart(4,'ab') // 'abax'
'x'.padEnd(4,'ab') // 'xaba'
'xxx'.padEnd(2,'ab') // 'xxx' 原字符串长度大于指定的最小长度,返回原字符串
'x'.padEnd(4) //'x   ' 省略第二个参数 默认用空格补齐
// padStart 常用于补齐指定位数
'123'.padStart(10,'0') // '0000000123'

模板字符串

// 运算
var x = 1
var y = 2
`${x} + ${y+2} = ${x+y+2}` // 1 + 4 = 5
// 调用函数
function fn () {
  return 'chenxuan'
}
`i am ${fn()}`  // i am chenxuan

es6语法说明

文档中会存在es6语法, 这里简单说明一下, 其中IE不支持es6语法

概览

  • let const
  • 模板字符串
  • 对象中属性方法简写
  • 箭头函数
  • 解构

这里只是简单说明, 有兴趣可以看大神阮一峰的资料

letconst

//lES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
{
	let a = 10;
	var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
//const声明一个只读的常量。一旦声明,常量的值就不能改变。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.

模板字符串

//模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
 not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

对象中属性方法简写

//常规写法
var name = 'zs';
var obj = {
	name: name,
	run: function(){
		console.log('haha');
	}
}
//简写
let name = 'zs';
let obj = {
	name,
	run(){
		console.log('haha');
	}
}

箭头函数

//常规写法
setTimeout(function(){
	//...
}, 1000);
//简写
setTimeout(() => {
	//...
}, 1000);

解构

//假如现在有一个对象
let obj = {
	name: 'zs',
	age: 18,
	address: 'beijing',
}
//正常获取name
var name = obj.name
//解构写法
let { name } = obj
//也可以多个
let { name, age, address } = obj;
//如果不存在也可以声明默认值
let { name, age, address, status = '1' } = obj;
//想添加一条属性
obj.status = '1';
//对象属性合并
var newObj = {
	...obj,
	status: '1'
}
//方法传参
function calc(data){
	var a = data.a;
	var b = data.b;
	return a + b;
}
//解构传参
function calc({ a, b }){
	return a + b;
}
### 如何在 Vue模板字符串中插入组件 在 Vue 中,可以通过多种方式实现将组件嵌套到模板字符串中的功能。以下是几种常见的方法及其具体实现: #### 方法一:使用插槽(Slot) Vue 提供了插槽机制来允许父组件向子组件传递内容。如果希望在一个动态生成的模板字符串中插入组件,则可以利用 `v-html` 和 `<component>` 动态渲染的功能。 ```html <template> <div v-html="compiledHtml"></div> </template> <script> export default { data() { return { compiledHtml: '' }; }, mounted() { this.compiledHtml = ` <div> <my-component></my-component> <!-- 自定义组件 --> </div>`; } }; </script> <!-- 注册自定义组件 --> <script> import MyComponent from './MyComponent.vue'; export default { components: { 'my-component': MyComponent } }; </script> ``` 需要注意的是,`v-html` 不会解析 Vue 组件标签,因此需要手动注册并确保组件被正确加载[^1]。 --- #### 方法二:使用 JavaScript 字符串拼接与 ES6 模板字面量 ES6 引入的模板字面量 `${}` 可以方便地构建复杂的 HTML 结构,并将其作为字符串返回。随后可通过 `v-html` 或者动态组件的方式呈现。 ```javascript const componentTemplate = ` <div> <h1>Hello, World!</h1> <custom-component :prop-name="'dynamicValue'"></custom-component> </div> `; // 将上述模板注入到页面中 this.dynamicContent = componentTemplate; ``` 然而,这种方式同样存在局限性——即无法自动解析未提前声明的组件标签[^4]。 --- #### 方法三:借助 `$createElement` 创建虚拟 DOM 节点 对于更复杂的需求场景,推荐采用程序化创建节点的形式完成任务。例如下面的例子展示了如何通过组合多个异步加载的小型模块最终形成完整的视图结构: ```js methods: { createDynamicComponent() { return this.$createElement('base-button', { props: { size: 'big' }, on: { click: this.handleClick } }); }, handleClick(event) { console.log('Button clicked!', event); } } ``` 此技术特别适合于需频繁更新界面布局的应用场合[^3]。 --- #### 方法四:结合 JSX 渲染函数语法表达逻辑控制流 当项目已启用 Babel 插件支持 React 风格开发模式时,可以直接运用 JSX 来描述 UI 层次关系。如下列出了一个简单的例子说明怎样把一段文字按照行分割后再逐项展示出来的同时加入额外标记符号辅助阅读体验提升效果显著: ```jsx setup() { const rawText = "这是第一行\n这是第二行"; const renderText = () => ( <> {rawText.split('\n').map((line, index) => ( <p key={index}><strong>{index + 1}.</strong> {line}</p> ))} </> ); return { renderText }; } ``` 以上片段实现了基于原始数据源构造增强版列表视图的目标[^5]。 --- ### 总结 综上所述,在 Vue模板字符串中插入组件有四种主要途径可供选择,分别是利用插槽特性、依靠现代 JS 特性和 API 构建高级解决方案以及混合传统手段达成目的。每种方案各有优劣之处,实际应用过程中应根据具体情况权衡利弊做出最佳决策。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值