初探 JavaScript 的 Error 物件

前言

  最近學習 JavaScript 2022 裡的 Error() 類別，在此把學習的過程做個紀錄。

內容

  早期的 Error 會像以下來使用

try{
  throw "Something is wrong!";
} catch(e){
  console.log(e); // Something is wrong!
}

拋擲錯誤的物件，也就是字串會在 catch() 內被當成引數"e"，在透過列印將錯誤訊息印在 console ， JavaScript 2022 的新標準多了 Error() 物件可以用用法如下

try{
  throw new Error('Something is wrong!');
} catch(e){
  console.log(e.message); // Something is wrong!
}

用法和舊的一樣，只是多了一個專門拋擲錯誤的類別"Error"，透過"message"，可以取得想要顯示的訊息，看了一下 [ developer.mozilla.org ] Error() constructor ，裡面有"fileName"與"lineNumber"兩個屬性，但是目前是不一定支援，要看瀏覽器而定，感覺是個可有可無的類別，不過畢竟是官方提供的，以後如果有擴充功能就會加在這裡，如果可以替代現有的錯誤回報最好還是做替換的動作。

參考資料

[ developer.mozilla.org ] Error() constructor

[medium.com/@seed45699 ] JS try catch 使用方式

 JavaScript 2022 的陣列新用法

前言

   JavaScript 2022 的陣列支援一個新的函式"at()"，這個函式支援用負值索引提取內容，抽空做個學習，在此做個紀錄。

內容

  範例如下

let ar = [ 'A' , 'B' , 'C'];
//Out of array...
console.log( ar.at(-4) );//undefined
//Invverse explore array
for( let i = -1 ; i >= -ar.length ; i-- ){
  console.log( ar.at(i) );
}
//"C"
//"B"
//"A"

範例利用新提供的 at() 來提取陣列的內容，當數值是正值的時候，結果和直接用"[]"提取時一樣，但這個函式提供父的索引值來提取，當用負值索引提取時要注意是從"-1"開始提取最後一個數值，所以範例超出所引的數值是"-4"，而非"-3"，最後順勢寫了個倒著瀏覽陣列的迴圈。

參考資料

[ exploringjs.com ] 4 New JavaScript features

 正則表達式的 URL 解法

前言

  URL 是個常見的正則表達式的應用，如果自己寫很浪費時間，所以在網上找了個使用範例，在此做個紀錄。

內容

  在 [ www.796t.com ] 匹配URL的正則表示式解析 裡可以找到，實際的運用如下

URL 的正則表達式

圖中的正則表達式使用的是"((http|ftp|https)://)(([a-zA-Z0-9\._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(/[a-zA-Z0-9\&%_\./-~-]*)?"，如果不需要通訊協定只需把前方的"((http|ftp|https)://)"截掉即可。

參考資料

[ www.796t.com ] 匹配URL的正則表示式解析

[ coding.tools ] 正則表達式在線測試工具

 正則表達式的 E-mail 解法

前言

  最近臨時需要驗證 E-mail ，本想很簡單直接上網找了幾個現成的來用，但發現都有些小毛病，最後找到一個比較正確的，在此做個紀錄。

內容

  在 [ codertw.com ] 郵箱/郵件地址的正則表達式及分析(JavaScript，email，regex) 裡可以找到可用的正則表達式，實際的應用如下

E-mail 的正則表達式

使用的正則表達式是"([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})"，這個結果實驗後可以符合大多狀況。

參考資料

[ codertw.com ] 郵箱/郵件地址的正則表達式及分析(JavaScript，email，regex)

[ coding.tools ] 正則表達式在線測試工具

 Element 的神奇用法

前言

  最近在找 URL 的正則表達式時意外發現 Element 的神奇用法，在此做個紀錄。

內容

  範例如下

var a = document.createElement('a');
 a.href = 'http://www.example.com:123/foo/bar.html?fox=trot#foo';

 ['href','protocol','host','hostname','port','pathname','search','hash'].forEach(function(k) {
    console.log(`${k}:${a[k]}`);
 });
//href:http://www.example.com:123/foo/bar.html?fox=trot#foo
//protocol:http:
//host:www.example.com:123
//hostname:www.example.com
//port:123
//pathname:/foo/bar.html
//search:?fox=trot
//hash:#foo

範例使用 Element 來解析 URL ， 先造好 Element ，在賦予 URL ，接著就可以透過陣列的方式取得 URL 的各項解析，要注意的是 [0] 代表的是完整的 URL ，從 [1] 開始才是各項解析。

參考資料

[ tw.coderbridge.com ] 獲取URL的一部分(正則表達式) (Getting parts of a URL (Regex))

 正則表達式的非貪心量化

前言

  最近在 [ zh.wikipedia.org ] 正規表示式 裡發現非貪心量化的寫法，在此把學習的過程做個紀錄。

內容

  範例如下

const reg = /\d+?/dg;
let s = '123_456,12_34';
for( const match of s.matchAll(reg) ){
  console.log(match.indices );
}
//Result
//[[0, 1]]
//[[1, 2]]
//[[2, 3]]
//[[4, 5]]
//[[5, 6]]
//[[6, 7]]
//[[8, 9]]
//[[9, 10]]
//[[11, 12]]
//[[12, 13]]

所謂的非貪心量化是指在 + 、 * 、 ? 與 {,}的後方再加一個"?"這樣可以打搜尋的結果分割成每一個符合條件的個體，範例如果只使用"\d+"的話，搜尋的結果只會有 4 個，加了"?"後就變成每個數字都是結果了。

參考資料

[ zh.wikipedia.org ] 正規表示式

 簡易的身分證字號的正則表達式

前言

  最近在 [ zh.wikipedia.org ] 正規表示式 裡發現身分證字號的正則表達式，在此做個紀錄。

內容

  範例如下

簡易的身份證字號的正則表達式

表達是寫法是"\w[1289]\d{8}"，要注意的是身份證字號的第一個數字只可能是 1 、 2 、 8 或 9 ，第二個身分證字號不符合是因為數字開頭不符合，當然這畢竟是簡易的，並非身份證字號的完整規則。

參考資料

[ zh.wikipedia.org ] 正規表示式

[ coding.tools ] 正則表達式在線測試工具