模版字串
``反引號表示
var cyy={ name:"cyy", age:18, say:function(){ console.log('我叫'+this.name+',我今年'+this.age+'歲'); }, say2:function(){ console.log(`我叫`+this.name+`,我今年`+this.age+`歲`);//模板字串可以替代單引號或者雙引號 }, say3:function(){ console.log(`我叫${ this.name },我今年${ this.age }歲`);//可以用${}替代字串拼接 }, say4:function(){ console.log(`我叫${ `Miss ${this.name}` },我今年${ this.age }歲`);//${}可以嵌套 }, say5:function(){ console.log(`我叫${ `Miss ${this.name.toUpperCase()}` },我今年${ this.age }歲`);//${}可以使用字串方法 } } cyy.say(); cyy.say2(); cyy.say3(); cyy.say4(); cyy.say5();
普通方式渲染資料
//模擬ajax獲取到資料 function getList(){ //ajax return { status:true, msg:"獲取成功", data:[{ id:1, title:"title1", date:"date1" },{ id:2, title:"title2", date:"date2" },{ id:3, title:"title3", date:"date3" }] }; } //結構賦值獲取資料（給data取別名listData) const {data:listData,msg,status}=getList(); if(status){ let arr=[]; //回圈獲取資料 listData.forEach(function({title,date}){ //普通方式渲染資料 arr.push('<li>\ <span>'+title+'</span>\ <span>'+date+'</span>\ </li>'); }) let ul=document.createElement("ul"); //join陣列轉字串 //arr.join('') 則字串直接拼接 //arr.join() 字串會用逗號分隔 ul.innerHTML=arr.join(''); document.body.appendChild(ul); }else{ alert(msg); }
使用模板字串渲染資料（可以直接換行，不用轉義）
//模擬ajax獲取到資料 function getList(){ //ajax return { status:true, msg:"獲取成功", data:[{ id:1, title:"title1", date:"date1" },{ id:2, title:"title2", date:"date2" },{ id:3, title:"title3", date:"date3" }] }; } //結構賦值獲取資料（給data取別名listData) const {data:listData,msg,status}=getList(); if(status){ let arr=[]; //回圈獲取資料 listData.forEach(function({title,date}){ //模板字串渲染資料 arr.push(`<li> <span>${ title }</span> <span>${ date }</span> </li>`); }) let ul=document.createElement("ul"); //join陣列轉字串 //arr.join('') 則字串直接拼接 //arr.join() 字串會用逗號分隔 ul.innerHTML=arr.join(''); document.body.appendChild(ul); }else{ alert(msg); }
還可以進一步對模板字串進行處理
//模擬ajax獲取到資料 function getList(){ //ajax return { status:true, msg:"獲取成功", data:[{ id:1, title:"title1", date:"date1" },{ id:2, title:"title2", date:"date2" },{ id:3, title:"title3", date:"date3" }] }; } //結構賦值獲取資料（給data取別名listData) const {data:listData,msg,status}=getList(); function foo(str){ return str.replace("date","mydate"); } if(status){ let arr=[]; //回圈獲取資料 listData.forEach(function({title,date}){ //模板字串渲染資料 arr.push(`<li> <span>${ `課程名 ${ title }` }</span> <span>${ foo(date) }</span> </li>`); }) let ul=document.createElement("ul"); //join陣列轉字串 //arr.join('') 則字串直接拼接 //arr.join() 字串會用逗號分隔 ul.innerHTML=arr.join(''); document.body.appendChild(ul); }else{ alert(msg); }
字串部分新的方法
padStart padEnd 補全字串長度
//padStart 從前面補全 //第一個引數是補全后的總長度，第二個引數是用來補全的字串 let str="cyy"; let str2=str.padStart(8,"nice "); let str3=str.padStart(13,"nice ");
//padEnd 從后面補全 //第一個引數是補全后的總長度，第二個引數是用來補全的字串 let str="cyy"; let str2=str.padEnd(8," nice"); let str3=str.padEnd(13," nice");
repeat 字串的重復
{ let str="c"; console.log(str.repeat(10));//重復10遍 let str2="cyy "; console.log(str2.repeat(4));//重復4遍 }
需要注意的是，repeat如果傳入小于-1的負數，如-3，會報錯
如果傳入大于-1的負數，如-0.33，會轉為0
如果傳入小數，如2.55，會取整（向下取整，轉為2）
自己封裝函式來實作類似repeat的功能
{ console.log(myRepeat("s",10));//重復10遍 function myRepeat(str,num){ // 定義陣列，元素個數為num+1 // 然后陣列轉字串，用str作為分隔符 return new Array(num+1).join(str); } }
startsWith endsWidth 判斷字串是否以什么開始，以什么結束
{ let str="i am cyy"; console.log(str.startsWith("i")); console.log(str.endsWith("yy")); }
includes 判斷存在
indexOf也可以實作類似功能
{ let str="i am cyy"; if(str.indexOf("cyy") !== -1){ console.log(`存在cyy`); } //~x=!(x+1) -1會轉為0 if(~str.indexOf("cyy")){ console.log(`存在cyy`); } if(str.includes("cyy")){ console.log(`存在cyy`); } }
ES6之前的方式遍歷字串
{ let str="i am cyy"; //原來的方式遍歷 for(var i=0,len=str.length;i<len;i++){ console.log(str[i]); //charAt 也可以通過下標回傳字符 console.log(str.charAt(i)); } }
字串轉為陣列，使用陣列原型的slice
{ let str="i am cyy"; //字串轉陣列 let str2=Array.prototype.slice.call(str); console.log(str2); let str3=str.split(""); console.log(str3); //擴展運算子 let str4=[...str]; console.log(str4); //擴展運算子2 let [...str5]=str; console.log(str5); //遍歷陣列 str5.forEach(function(w){ console.log(w); }) }
for in 遍歷物件或者陣列的屬性
for of ES6新增，只能遍歷陣列，不能遍歷物件
forEach 只遍歷陣列，不能遍歷物件
for 遍歷陣列常用
遍歷操作字串（使用陣列方式）
對字串中的大寫字母進行加密
{ //方法一 const map={ A:"100", B:"99", C:"98", D:"97", E:"96", F:"95", G:"94" }; const words="ABCDEFG"; let str="I AM CYY"; let ostr=[...str];//字串轉陣列 ostr.forEach(function(word,index){ if(words.includes(word)){ ostr[index]=map[word]; } }) console.log(ostr); console.log(ostr.join(""));//拼接回字串 }
使用for of遍歷字串
//for of遍歷字串 let str="I AM CYY"; for(let s of str){ console.log(s); }
使用for of實作資料加密
{ //for of實作字符加密 const map={ A:"100", B:"99", C:"98", D:"97", E:"96", F:"95", G:"94" }; const words="ABCDEFG"; let str="I AM CYY"; let nstr=""; for(let s of str){ if(words.includes(s)){ nstr+=map[s]; }else{ nstr+=s; } } console.log(nstr); }
unicode表示法
{ //unicode碼點 \u //一般只會識別0000-ffff //因為會識別四位，\u1f43是?，后面跟上6 let str="\u1f436"; console.log(str); //ES6允許碼點帶上花括號，這樣就會識別全部碼點，不會在四位截斷 let str2="\u{1f436}"; console.log(str2); }
在控制臺輸入測驗的時候，記得帶上引號
codePointAt 獲取字串中某個字符對應的碼點
{ //unicode碼點 \u //一般只會識別0000-ffff //因為會識別四位，\u1f43是?，后面跟上6 let str="\u1f436"; console.log(str); //ES6允許碼點帶上花括號，這樣就會識別全部碼點，不會在四位截斷 let str2="\u{1f436}"; console.log(str2); console.log("??".codePointAt(0));//128054 console.log("??".codePointAt(0).toString(16));//1f436 獲取碼點，再轉16進制 }
at 根據下標取字符
{ console.log("??123".at(0)); }
這個chrome瀏覽器不支持，需要編譯成ES5代碼
正則擴展(u、y 修飾符)
創建正則的三種方式：
{ const pattern1=/^c/g; const pattern2=new RegExp("^c","g"); const pattern3=new RegExp(/^c/g); }
{ const pattern1=/^c/g; const pattern2=new RegExp("^c","g"); const pattern3=new RegExp(/^c/g); console.log("cyy".match(pattern1)); console.log("vyy".match(pattern1)); }
修飾符 u unicode
如果不使用u修飾符，在匹配時如果兩個字符不同，但是unicode存在包含情況，會出錯
{ console.log(/^\ud83d/.test("\ud83d\udc36"));//true }
{ console.log(/^\ud83d/.test("\ud83d\udc36"));//true //使用u修飾符，正確判斷unicode console.log(/^\ud83d/u.test("\ud83d\udc36"));//false }
y 粘連修飾符（匹配一次之后必須連續匹配，緊挨著上一次匹配的結束）
{ const r1=/cyy/g; const r2=/cyy/y; const str="cyycyy-cyy"; console.log(r1.exec(str)); console.log(r1.exec(str)); console.log(r1.exec(str)); console.log(r1.exec(str)); console.log("----------------------"); console.log(r2.exec(str)); console.log(r2.exec(str)); console.log(r2.exec(str)); }
{ let text="\ud83d\udc36"; //.表示匹配任意一個字符，添加了首尾限制后，表示匹配的字串只能是一個字符 // 但是'\ud83d\udc36'是兩個字符，所以無法匹配到，回傳false console.log(/^.$/.test(text));//false //添加u之后，會識別text的unicode為一個字符，因此可以匹配到 console.log(/^.$/u.test(text));//true }
數值擴展
新的進制表示法：
{ //0o 0O octonary 八進制 //0b 0B binary 二進制 // 在之前，016表示14 // 為了避免誤解，規定八進制用0o開始，二進制用0b開始 console.log(016);//報錯 console.log(0o16);//14 console.log(0b1111);//15 }
新的方法與安全數：
把parseInt和parseFloat，從window上掛到了Number上
{ //原來掛在window上 console.log(window.parseInt(1.22)); console.log(window.parseFloat(1.22)); //window可以省略 console.log(parseInt(1.22)); console.log(parseFloat(1.22)); //ES6掛到了Number上 console.log(Number.parseInt(1.22)); console.log(Number.parseFloat(1.22)); }
isNaN 是不是非數值
{ console.log(Number.isNaN(NaN)); console.log(Number.isNaN(-NaN)); console.log(Number.isNaN("1")); console.log(Number.isNaN(1)); console.log(Number.isNaN(null)); console.log(Number.isNaN(false)); }
用自己的方式實作isNaN
{ console.log(myNaN(NaN)); console.log(myNaN(-NaN)); console.log(myNaN("1")); console.log(myNaN(1)); console.log(myNaN(null)); console.log(myNaN(false)); function myNaN(value){ //NaN的特點就是不等于自身 return value !== value; } }
isFinite 是否有限
MAX_SAFE_INTEGER 最大安全數
MIN_SAFE_INTERER 最小安全數
isSafeInteger 是否是安全數
{ //是否是有限的 console.log(Number.isFinite(NaN)); console.log(Number.isFinite(Infinity)); console.log(Number.isFinite(2/0)); console.log(Number.isFinite(1)); console.log(Number.isFinite("123")); console.log(Number.isFinite(true)); console.log(Number.MAX_SAFE_INTEGER);//最大安全數 console.log(Number.MIN_SAFE_INTEGER);//最小安全數 console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER-1));//是否是安全數 console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER+1)); }
冪運算 **
{ let a=2**10;//2的10次 console.log(a);//1024 //默認是右結合，先計算10的0次 let b=2**10**0; console.log(b);//2 //用括號改變運算順序 let c=(2**10)**0; console.log(c);//1 }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/139466.html
標籤：JavaScript
上一篇：內置物件Math.random()亂數方法的三種示例
下一篇：vue使用vuex后報警：There are multiple modules with names that only differ in casing.