本文實(shí)例講述了ES6新特性之變量和字符串用法。分享給大家供大家參考，具體如下：
一、變量
1. LET
我們都習(xí)慣用var 來聲明變量，現(xiàn)在還可以用let來聲明變量，兩者的主要區(qū)別是作用域：var聲明的變量作用域為包圍它的函數(shù)，而let聲明的變量作用域僅在它所在的塊中。（在ES5中是沒有塊的概念的）。
if(true){ let a=1;}console.log(a);//undifined這樣使代碼更加干凈，減少滯留的變量，再如我們經(jīng)常用的數(shù)組遍歷：
for(let i=0;i<lists.length;i++){ //do somthing with lists[i]}console.log(i)l//undifined通常情況下，我們在同一作用域里使用變量J來完成另一個遍歷，但是現(xiàn)在有了let，可以安全的再一次聲明i變量，因為它只在被聲明的塊中有效。
2.CONST
const也是用于聲明塊作用域變量的方法，使用const可以聲明一個值得只讀引用，必須直接給一個變量賦值，如果嘗試該變量或者沒有立即給變量賦值，都將報錯：
const MY_CONSTENT=1;MY_CONSTENT=2;//errorconst MY_CONSTENT;//error
注意對象的屬性或數(shù)組成員還是可以改變的
const MY_OBJECT={some:1};MY_OBJECT.some='body';3.箭頭函數(shù)
箭頭函數(shù)使得JS代碼更加簡潔。下面將箭頭函數(shù)和ES5版本的函數(shù)寫法：
//箭頭函數(shù)let books=[{"title":"X","price":20},{"title":"Y","price":40}];let titles=books.map(item=>item.title);//ES5函數(shù)var titles=books.map(function(item){ return item.title;});觀察箭頭函數(shù)的語法，會發(fā)現(xiàn)其中并沒有出現(xiàn)function關(guān)鍵字，只保留零或多個參數(shù)、“胖箭頭”（“=>”）和函數(shù)表達(dá)式，return聲明被隱式加入。帶有零或者多個參數(shù)時必須使用括號：
//no argumentsbooks.map(()=>1);//[1,1]//Mutiple arguments[1,2].map((n,index)=>n*index);//[0,2]
如果需要寫更多的邏輯或更多的空格，可以把函數(shù)表達(dá)式放在（{}）塊中：
let result=[1,2,3,4,5].map(n=>{ n=n%3; retutn n;})箭頭函數(shù)不單是為了輸入更少的字符，它們的表現(xiàn)也和一般的函數(shù)不同。它的繼承了當(dāng)前上下文的this和arguments，這就意味著你可以避免寫var that=this這樣的代碼，也不需要把函數(shù)綁定到正確的上下文了：
//ES6let books={ title'X', sellers:['A','B'], printSellers(){ this.sellers.forEach(seller=>console.log(seller+'seller'+this.title)) }};//ES5var books={ title='X', sellers:['A','B'], printSellers:function(){ var that=this; this.sellers.forEach(function(seller){ console.log(seller+'seller'+that.title) }) }};二、字符串
1.方法
字符串String原型中增添了幾個新方法，用于簡化需要用indexOf()方法來解決的問題的復(fù)雜度，并達(dá)到同樣的效果：
'my string'.startsWith('my');//true'my string'.endsWith('my');//false'my string'.includes('str');//true添加了另一個方法，用于創(chuàng)建重復(fù)字符串：
'my'.repeat(3);//'my my my'
2. 模板字符串
模板字符串提供提供一個簡潔的方式來實(shí)現(xiàn)字符串插值，它基于美元符號和花括號${...},模板字符串置于引號之中：
//ES6let name='json', apples=5, pears=7, bananas=function(){return 3};console.log('this is${name}');console.log('he carries ${apples} apples,${pears} pears,and ${bananas()} bananas');//ES5console.log('he carries'+ ${apples}+' apples,'+${pears}+' pears,and '+${bananas()}+' bananas');以上形式對比ES5僅僅是便于字符串的拼接，實(shí)際上，模板字符串還可以用于多行字符串（空格也是字符串的一部分）：
let x='1... 2... 3 lines long!';//ES5var x='1...'+ '2...'+ '3 lines long!';var x="1...2...3 lines long!';
希望本文所述對大家ECMAScript程序設(shè)計有所幫助。
新聞熱點(diǎn)
疑難解答
