在 ES6 中,我們多了一個非常好用的模版字符串(template literal),如果你會在 JS 中「放入 HTML 的內容」、或者有「很長的字串包含換行」、又或者會有「字串連結變數」這樣的需求,模版字符串會是非常方便的作法。

另外,在 ES6 中可以將模版字符串和函式結合使用,形成一個標籤模版(tagged template),可以以此過濾 HTML 字串,避免使用者輸入惡意內容。

模版字符串(template literal)的基本應用

模版字符串的使用非常簡單,就是使用反引號" ` "(鍵盤左上角的~),舉例來說,如果我們會在 JS 的字串中放入 HTML 內容,在過去我們可能需要這樣寫:

let component_es5 = 
'<header>\n'+
    '<div class="banner">\n'+
        '<img src="/img1.jpg"\n'+
    '</div>\n'+
'</header>'

這麼寫相當麻煩,而且不易閱讀。而在 ES6 中我們可以用反引號快速的解決這樣的狀況:

let component_es6 = `
<header>
    <div class='banner'>
        <img src="/img1.jpg>
    </div>
</header>
`
Add a comment

過去我們可以使用 for, while, do while, for...in 等內在的函式來處理資料,而在 ES6 中我們多了 for...of 這個簡易的用法來處理這些疊代型的資料(iterable objects),包含陣列、字串、map、set、等等...。

陣列中 for...of 的基本用法

for...of 的使用非常簡單,以陣列為例:

let arr = [10, 20, 30]

for(let value of arr){
  console.log(value);  // 10, 20, 30
}

只要用這樣的方式,就可以把陣列的值一個個取出,不用像過去寫一大串像是 for(let i = 0; i < arr.length; i++){...} 是不是方便許多呢

Add a comment

使用print()函數帶入document可將本頁面文本資料,直接由瀏覽器內建列印的對話視窗開啟列印

HTML

<input name="print" type="button" value="列印此頁"
onClick="varitext()">

Javascript

function varitext(){
  var text = document
  print(text)
}
Add a comment

push() 在陣列的末端加入一個以上的元素,並返回新的陣列長度。

var a = [1, 2];
a.push(3);
print(a); // 1,2,3

unshift() 在陣列的開頭處加入一個以上的元素,並返回新的陣列長度。

var a1 = [1, 2, 3];
a1.unshift(4);
print(a1); // 4,1,2,3
Add a comment

toISOString()轉換解决方式

台灣的所屬時區比協調世界時快8小時,UTC+8 或是 GMT+8 ,這裡的 +8 是指比 UTC 或是 GMT 快8小時的意思。 就如Sun Jun 30 2019 00:00:00 GMT+0800 (台北標準時間),使用toISOString().substr(0, 10)轉換擷取前面10個字串,會得到2019-06-29,相差了一天的日期。

GMT+0800 (台北標準時間),toISOString()轉換因為時區問題會相差8小時。

//解决方式
const date = new Date(+new Date() + 8 * 3600 * 1000); //加入相差的8小時
const currentMonth = date.toISOString().substr(0, 10);
Add a comment

isFloat and isInteger in javascript

解決的方法可以使用下列函數來檢查上isFloat和isInteger

function isFloat(n) {
  return n === +n && n !== (n|0);
}

function isInteger(n) {
  return n === +n && n === (n|0);
}
Add a comment

JavaScript如何使用正規表示式顯示數值千分位

n = "1279834847944074100465236.33";
re = /(\d{1,3})(?=(\d{3})+(?:$|\D))/g ;
n1 = n.replace(re,"$1,");

console.log(n + "\r\n" + n1);
Add a comment

在JS中如果使用new Date函數,可以使用傳參數形式獲取某一月的最後一天,並且自動判斷潤平年和大小月,如下:

//使用new Date(year,month,0)的方式,可以獲取該月份最後一天日期
var lastDay = new Date('2019','05',0);

輸出結果

Add a comment