目录
一、javascript判断多维数组是否包含某字段的解决方案
十六、ES6-11模版字符串,变量拼接、多行文本、插入表达式、调用函数
一、对数据的处理简化:增删改查
1.对数组的处理
- 【数组】Object.entries(arr)
1.可以把一个对象的键值以数组的形式遍历出来,结果和for...in循环遍历该对象时返回的结果一样,但是不会遍历其原型属性。
2.例:const varList = Object.entries(arr)
- 【数组去重】let new = Array.from(new Set(arr))
-
【数组排序1】paixu.sort((a, b) => a - b);//排序
-
【数组排序2】根据对象某个属性值排序 paixu.sort((a, b) => {b.km - a.km});//排序
- 【数组】some()
- 方法用于检测数组中元素是否满足指定条件
- 不会对空数组进行检测
- 不会改变原始数组
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
- if(arr.some(function checknumber(number){return number == 12;})) { } (some里面为函数)
- 【数组】every() 方法
- 用于检测数组所有元素是否都符合指定条件
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
-
every() 不会对空数组进行检测。
-
every() 不会改变原始数组。
-
if(arr.every(function checknumber(number){return number > 10;})){ } (every里面为函数)
- 【数组】pop:取最后一项 str.pop()
- 【数组】shift:取第一项 str.shift()
- 【数组】str[3] = 'value':在数组中间插一项
- 【数组】push:数组末尾加入一项 str.push()
- 【数组】unshift:数组起始位置加入一项 str.unshift()
- 【数组】reverse:反转数组项顺序str.reverse()
- 【数组】splice
- 删除:str.splice(0,2) 删除前两项 【要删除的第一项的位置+要删除的项数】 【需2参】
- 插入:str.splice(2,0,‘red’,'green') 【起始位置+0(要插入的项数)+要插入的项】 【需4参】
- 替换:str.splice(2,1,‘red’,'green') 【起始位置+要删除的项数+要插入的任意数量的项】 【需3参】
- 【数组】slice:返回从起始位置到结束位置的所有项;允许单个位置 str.slice(1,2)
- Object.keys()
-
一个表示给定对象的所有可枚举属性的字符串数组。
// simple array var arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2'] // array like object var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj)); // console: ['0', '1', '2'] // array like object with random key ordering var anObj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(anObj)); // console: ['2', '7', '100'] // getFoo is a property which isn't enumerable var myObj = Object.create({}, { getFoo: { value: function () { return this.foo; } } }); myObj.foo = 1; console.log(Object.keys(myObj)); // console: ['foo']
2.1对字符串的处理
存不存在某个字符串:
var str = "123"; console.log(str.indexOf("3") != -1 ); // true
let trimStart = str => str.replace(new RegExp('^([\\s]*)(.*)$'), '$2')
trimStart(" abc")
let trimEnd = str => str.replace(new RegExp('^(.*?)([\\s]*)$'), '$1')
trimEnd(' abc ')
- split(): 将字符串转换为数组str.split('/')[0]
- 【字符串】substring(): 类似于slice(),区别是不能设置负数索引
- 取前几位字符:str.substring(0, 10)
- str.substring(0, str.indexOf("_")) //indexOf( ): 查找字符串中的字符串
- parseFloat //去掉百分号
- 判断奇偶
- 字符串
- length: 字符串的长度
- indexOf( ): 查找字符串中的字符串
- lastIndexOf(): 查找字符串中的字符串
- replace() 方法不会改变调用它的字符串,返回的是新的字符串
- str.toUpperCase():把字符串转换成大写
- str.toLowerCase():**把字符串转换成小写
- concat(): 连接两个或多个字符串
- JS截取指定字符串到指定字符串之间的内容 str = str.match(/起始查询数据(\S*)结束查询数据/)[1];
- 整除判断:a % b == 0
-
字符串前面空格去除与替换
- 字符串后面空格去除与替换
- js中截取字符串中的指定字符串
let name = '名字/数量' name.substring(name.indexOf("\/")+1,name.length) name.substring(0,name.indexOf("/"))
2.2对数字的处理
-
小数保留两位小数,整数不补零 :parseFloat(num1.toFixed(2))
3.对对象的处理
- 判断对象是否为空
方法一:将对象转JSON,如果为空集合{} ,那么就是空对象
JSON.stringify(obj) === '{}'
方法二:判断对象的长度,如果为零,那就是空对象
Object.keys(object).length==0
- typeof:判断数据类型最常见的判断方法(拓展:typeof通常与以下字符串比较:undefined、object、boolean、number、string、symbol和bigint)
typeof运算符的返回类型为字符串,值包括如下几种:
1. 'undefined' --未定义的变量或值
2. 'boolean' --布尔类型的变量或值
3. 'string' --字符串类型的变量或值
4. 'number' --数字类型的变量或值
5. 'object' --对象类型的变量或值,或者null(这个是js历史遗留问题,将null作为object类型处理)
6. 'function' --函数类型的变量或值
例:
console.log(typeof a); //'undefined'
console.log(typeof(true)); //'boolean'
console.log(typeof '123'); //'string'
console.log(typeof 123); //'number'
console.log(typeof NaN); //'number'
console.log(typeof null); //'object'
var obj = new String();
console.log(typeof(obj)); //'object'
var fn = function(){};
console.log(typeof(fn)); //'function'
console.log(typeof(class c{})); //'function'
二、对数据格式的转换:
1、转换为string
str.toString()
2、转换为int
parseInt(str)
3、控制小数点后位数(四舍五入)
str.toFixed(1)
控制小数点后位数(直接截取,不补0)
Math.floor(num * 100) / 100
4、转换为number
Number(str)
三、数组与字符串之间各项操作
-
数组赋值
-
将字符串转换为数组
-
reverse:将数组反序
-
数组元素的字符串化join
-
数组元素的删除
-
数组的创建
-
JS实现奇偶数的判断
-
JS截取指定字符串到指定字符串之间的内容
1、首先用的最多的就是给数组赋值了
push:将参数添加到原数组末尾,并返回数组的长度
例1:
this.tableData=[]
this.tableData.push(data)
例2:
let list = [];
for (var i in this.form.lists) {
if(this.form.lists[i].value!=''&&this.form.lists[i].value!=null){
list.push({
id: this.form.lists[i].value
})
}
}
split(): 将字符串转换为数组:
var str1 = "a,b,c,d,e,f"
var arr = str1.split(",") // 用逗号分隔
// var arr = str1.split(" ") // 用空格分隔
// var arr = str1.split("|") // 用竖线分隔
arr[0] // 返回 a
arr[0] = "H" // 可以接受赋值,当前 arr[0] 返回 H
2、reverse:将数组反序
data.reverse(); //反转元素(最前的排到最后、最后的排到最前)
data.sort(); //对数组元素排序
3、数组元素的字符串化
data = []
data.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开,separator可以为','。
4、数组元素的删除
data.pop(); //移除最后一个元素并返回该元素值
data.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移
data.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
5、数组的创建
var arrayObj = new Array(); //创建一个数组
var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值
要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。
6、sort(orderfunction):按指定的参数对数组进行排序
7、slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组
8、JS去掉数据的百分号 :parseFloat("")
9、JS实现奇偶数的判断:
if(i%2 ==0){}
10、lastIndexOf
var str = "abcadef"
var strLen = str.lastIndexOf('a') // 3
注意:
- 如果未找到文本,indexOf()和lastIndexOf() 均返回 -1
replace() 方法不会改变调用它的字符串,返回的是新的字符串
参数: 字符串中即将被替换的文本,替换成的文本
该方法默认只替换首个匹配:
var str = "hello world"
var strx = str.replace("world","xiaomeizi") // hello xiaomeizi
注意: 该方法对大小写敏感,因此不会匹配到大写的”WORLD“
如果想执行大小写不敏感的替换需要使用正则表达式: /i(大小写不敏感 )
var str = "HELLO world"
// 注意:使用正则表达式时不需要带引号
var strx = str.replace(/hello/i,"xiaomeizi") // xiaomeizi world
concat(): 连接两个或多个字符串
参数: 第一个参数是用什么连接,第二个是连接到谁,以此类推可连接多个
var str1 = "Hello"
var str2 = "World"
var str3 = "xxx"
var strx = str1.concat(" ",str2) //Hello World
var stry = str1.concat(" ",str2," 123 ",str3) //Hello World 123 xxx
concat() 方法可用于代替加运算符,下面两行代码等效:
var strx = "Hello" + " " + "World" //Hello World
var stry = "Hello".concat(" ","World") //Hello World
13、JS截取指定字符串到指定字符串之间的内容
var str="<123>asdadsadsa<456>";
str = str.match(/<123>(\S*)<456>/)[1];
console.log(str);
\S:匹配任何非空白字bai符。
*:匹配前du面的子表达式零次或多次。zhi
四、vue替换数组对象的某个属性值($set
)
通过$set
给某个属性从新赋值,具体参照官网API — Vue.js
data:[
{name: 'xxx', status: 0},
{name: 'xxx', status: 1},
{name: 'xxx', status: 0},
{name: 'xxx', status: 1},
]
data.forEach(item => {
if (item.status === 0) {
// 'status'为属性名,'非活动'为修改后的内容
this.$set(item, 'status', '非活动')
} else if (item.status === 1) {
this.$set(item, 'status', '活动')
}
})
注意$set
只在vue的js中生效,当提取为公共方法写在js中时,this.$set
会报错undefined,在js中写法为
data:[
{name: 'xxx', status: 0},
{name: 'xxx', status: 1},
{name: 'xxx', status: 0},
{name: 'xxx', status: 1},
]
data.forEach(item => {
if (item.status === 0) {
// 'status'为属性名,'非活动'为修改后的内容
item.status = '非活动'
} else if (item.status === 1) {
item.status = '活动'
}
})
五、优化if - else if(switch case)
let string = "今天是星期";
let date = new Date().getDay();
switch (date) {
case 0 :
string += "日";
break;
case 1 :
string += "一";
break;
case 2 :
string += "二";
break;
case 3 :
string += "三";
break;
case 4 :
string += "四";
break;
case 5 :
string += "五";
break;
default:
默认代码块
}
六、数组中的map方法 - 取数组中某一项集成新数组
-
作用:通过指定函数对数组进行处理,并将处理后的结果以新数组的形式返回
-
注意点:不会改变原数组,只是将处理后的结果以新数组的形式返回
举例1:
let list = [[{coord: [120.14322240845, 30.236064370321], elevation: 21},
{coord: [120.14280555506, 30.23633761213], elevation: 5}],
[{coord: [120.13018670197, 30.238217082645], elevation: 37.4},
{coord: [120.12937154076, 30.237475794242], elevation: 30.8}]
]
var lines = list.map(function (track) {
return {
coords: track.map(function (item, index) {
return item.coord;
})
};
});
console.log(lines)
打印:
举例2:
"list0": [
{
"fid": "1",
"fcreateTime": "2021-05-06 18:45:11",
}
],
let data0 = res.data.list0;
if (data0.length != 0) {
数组 = data0.map((item, index) => {
return item.fid;
});
}
七、 监听按键事件:右键...F1...F15...Esc
监听按键事件 :
mounted() {
window.addEventListener("keydown", this.KeyDown, true);//监听按键事件
document.oncontextmenu = function () {
//屏蔽右键
return false;
};
document.onselectstart=function(){
//屏蔽选中
return false;
}
document.onselect= function() {
//屏蔽选中
return false
}
}
方法:
KeyDown(event) {
//F1
if (event.keyCode === 112) {
event.returnValue = false;
}
//F2
if (event.keyCode === 113) {
event.returnValue = false;
}
//F3
if (event.keyCode === 114) {
event.returnValue = false;
}
//F4
if (event.keyCode === 115) {
event.returnValue = false;
}
//F5
if (event.keyCode === 116) {
event.returnValue = false;
}
//F6
if (event.keyCode === 117) {
event.returnValue = false;
}
//F7
if (event.keyCode === 118) {
event.returnValue = false;
}
//F8
if (event.keyCode === 119) {
event.returnValue = false;
}
//F9
if (event.keyCode === 120) {
event.returnValue = false;
}
//F11
if (event.keyCode === 122) {
event.returnValue = false;
}
//F12
if (event.keyCode === 123) {
event.returnValue = false;
}
//F13
if (event.keyCode === 124) {
event.returnValue = false;
}
//F14
if (event.keyCode === 125) {
event.returnValue = false;
}
//F15
if (event.keyCode === 126) {
event.returnValue = false;
}
//Esc
if (event.keyCode === 27) {
event.returnValue = false;
}
//Control
if (event.keyCode === 17) {
event.returnValue = false;
}
//Delete
if (event.keyCode === 46) {
event.returnValue = false;
}
//Backspace
if (event.keyCode === 8) {
event.returnValue = false;
}
八、return 与return false区别
1. return返回null,起到中断方法执行的效果,只要不return false事件处理函数将会继续执行,表单将提交
2. return false,事件处理函数会取消事件,不再继续向下执行。表单将终止提交。
九、逻辑运算符:&&、&、||、|
JS“&&”和“||”是逻辑运算符;“&”和“|”是位运算符。
1、运算表达的不同
只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。
JavaScript中的位运算符:“|”运算方法:两个位(二进制数)只要有一个为1,那么结果都为1。否则就为0
2、使用方式的不同
只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;
只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;
3、运算逻辑的不同
按位与:a&b是把a和b都转换成二进制数然后再进行与的运算;
逻辑与:a&&b就是当且仅当两个操作数均为true时,其结果才为true;只要有一个为零,a&&b就为零。
4、&&、&两者都表示运算,但是&&运算符第一个表达式不成立的话,后面的表达式不运算,直接返回。
而&对所有表达式都得判断。
十、ES5/ES6 合并数组方法及去重
let arr1 = ['a', 'b', 'c'];
let arr2 = [1, 2, 3];
// ES5 合并
let arrES5 = arr1.concat(arr2);
console.log(arrES5); // ["a", "b", "c", 1, 2, 3]
//ES6 拓展运算符合并
let arrES6 = [...arr1, ...arr2];
console.log(arrES6); // ["a", "b", "c", 1, 2, 3]
合并两个数组并去重
ES6实现方式
- new Set() 去重
- Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。(所谓类数组对象,最基本的要求就是具有length属性的对象。)
let arr1 = [1, 1, 2, 3, 6, 9, 5, 5, 4]
let arr2 = [1, 2, 5, 4, 9, 7, 7, 8, 8]
function uniqueArr(arr1,arr2) {
//合并两个数组
let arr = [...arr1,...arr2]
//去重
let arr3 = Array.from(new Set(arr)) //或者 let arr3 = [...new Set(arr)]
}
ES5实现方式
var arr1 = [1, 1, 2, 3, 6, 9, 5, 5, 4]
var arr2 = [1, 2, 5, 4, 9, 7, 7, 8, 8]
function uniqueArr(arr1, arr2){
var arr3 = arr1.concat(arr2)
var arr4 = []
for(var i=0,len=arr3.length; i<len; i++) {
if(arr4.indexOf(arr3[i]) === -1) {
arr4.push(arr3[i])
}
}
console.log(arr4)
}
uniqueArr(arr1, arr2)
十一、浏览器相关
- 完整url window.location.href
- 路由路径 this.$route.path
- 后退2步 this.$router.go(-2);
- 后退1步 this.$router.back();
- 后退1步 this.$router.go(-1);
- 禁止后退 history.pushState(null, null, document.URL);
十二、JQ操作
由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突,则重命名 jQuery 库
一、操作
- 就绪事件 $(document).ready(function(){});
- 点击事件 $("button").click(function(){});
- 双击事件 $(selector).dblclick(function(){});
- 焦点事件 $(selector).focus(function(){});
- 鼠标悬停事件 $(selector).mouseover(function(){});
- 隐藏所有 <p> 元素: $("p").hide();
-
显示所有 <p> 元素: $("p").show()
- 直接设置样式值 $('.formControl').css('cursor','text')
- 同时设置多个属性 $('.formControl').css({name:value,name:value,name:value....})
- 追加样式 $('.formControl').addClass('class名')
- 移除样式 $('.formControl').removeClass('class名')
-
控制按钮禁用与启用
$(
'#button'
).attr(
'disabled'
,
"true"
);
-
$(
'#button'
).removeAttr(
"disabled"
);
- 删除被选元素及其子元素 $("#div1").remove();
- 删除被选元素子元素 $("#div1").empty();
- 向下滑动元素 $(".panel").slideDown("slow");
- 创建自定义动画 $(selector).animate({params},speed,callback);
$("div").animate({left:'250px'});
- 动画使用多属性 $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });
- 停止动画或效果 $("#panel").stop();
- 获得输入字段的值 $("#test").val()
- 设置或返回所选元素的文本内容 $("#test").text() $("#test1").text("Hello world!")
$("#test").html() $("#test2").html("<b>Hello world!</b>") - 获得链接中 href 属性的值 $("#w3s").attr("href")
- 在被选元素的结尾插入内容 $("p").append("Some appended text.");
- 在被选元素的开头插入内容 $("p").prepend("Some prepended text.");
- 不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮,通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>
- $.get()
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
- $.post()
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
二、jQuery 选择器
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
element | $("p") | 所有 <p> 元素 |
.class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
:first | $("p:first") | 第一个 <p> 元素 |
:last | $("p:last") | 最后一个 <p> 元素 |
:even | $("tr:even") | 所有偶数 <tr> 元素 |
:odd | $("tr:odd") | 所有奇数 <tr> 元素 |
:eq(index) | $("ul li:eq(3)") | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
:lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
:not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
:header | $(":header") | 所有标题元素 <h1> - <h6> |
:animated | 所有动画元素 | |
:contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
:empty | $(":empty") | 无子(元素)节点的所有元素 |
:hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
:visible | $("table:visible") | 所有可见的表格 |
s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
[attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
[attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
:input | $(":input") | 所有 <input> 元素 |
:text | $(":text") | 所有 type="text" 的 <input> 元素 |
:password | $(":password") | 所有 type="password" 的 <input> 元素 |
:radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
:checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
:submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
:reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
:button | $(":button") | 所有 type="button" 的 <input> 元素 |
:image | $(":image") | 所有 type="image" 的 <input> 元素 |
:file | $(":file") | 所有 type="file" 的 <input> 元素 |
:enabled | $(":enabled") | 所有激活的 input 元素 |
:disabled | $(":disabled") | 所有禁用的 input 元素 |
:selected | $(":selected") | 所有被选取的 input 元素 |
:checked | $(":checked") | 所有被选中的 input 元素 |
十三、this
显式绑定
通过call(..)
或者 apply(..)
方法。第一个参数是一个对象,在调用函数时将这个对象绑定到this。因为直接指定this的绑定对象,称之为显示绑定。
function foo() {
console.log( this.a );
}
var obj = {
a: 2
};
foo.call( obj ); // 2 调用foo时强制把foo的this绑定到obj上
十四、对多维数组的处理
一、javascript判断多维数组是否包含某字段的解决方案
数据格式
var menuList = [
{
"cpu": [
"停机",
"正常运行"
],
"ddr": [
"正常运行",
"正常运行"
],
"disk": "正常运行",
"wlan": "正常运行"
}
];
let list = JSON.stringify(menuList);//转为字符串
//getInJson:封装文件;list:字符串格式数组,"停机":关键字;
let GetBinaryType = this.getInJson(list,"停机")
console.log(GetBinaryType );
//getInJson:封装文件
//判断多维数组是否包含某字段
//array 字符串格式数组
//target 关键字
getInJson(array, target) {
if (array.search(target) !== -1) {
return true; //存在
} else {
return false; //不存在
}
};
二、多维数组取最后一级的第一个值
需要简单的一个闭包函数
//闭包函数
//treeDatas数组
this.closure(this.treeDatas)
//闭包函数
closure(data) {
//有下级
if (data[0].children.length == 0) {
this.nowKey = data[0].id
} else {
this.closure(data[0].children)
}
},
十五、项目中JS的处理
1.判断不能为空,可以是0
var value = null // 0, ‘’, null, undefined
if (!value && String(value) !== '0') {
console.log('不能为空');
}
2.输入字符串判断数字区间
自定义校验版:
var validate1_100 = (rule, value, callback) => {
if (Number(value) > 100 || Number(value) < 1) {
callback(new Error('请输入1-100之间的数字'));
} else {
callback();
}
};
3.退出登录时清缓存(浏览器及vuex)
sessionStorage.clear()
localStorage.clear()
4.数组里是否存在某个字段
let list = []
//判断
//list.indexOf(roleKey) > -1
5.forEach强制结束循环
try {
this.list.forEach((element) => {
if (element.role.indexOf(roleKey) > -1) {
throw new Error('停止')
}
});
} catch (e) {};
十六、ES6-11模版字符串,变量拼接、多行文本、插入表达式、调用函数
1.变量拼接
//变量拼接
let food= '西红柿';
let result = `${food}可以把我当水果来吃`;
2.在模版字符串里面调用函数表达式
let food=function(){
return "苹果"
}
let c=`我喜欢吃${food()}`;
3.插入一个表达式
//插入表达式
let x=30;
let y=10;
jia=`x-y=${x-y}`
4.
在模版字符串中使用htnl代码以及多行文本代码
//html代码以及换行文本
let hi=`<div>
<h2>你好呀!</h2>
</div>`