關於 Number.toFixed()

前言

  最近發現 JavaScript 可以透過 Number.toFixed() 來取得精度修正後的字串，在此把學習的過程做個紀錄。

內容

  範例如下

const numObj = 12345.6489;
console.log( Math.round(numObj * 10) / 10  );//12345.6
console.log( numObj.toFixed(1) );//"12345.6"
console.log( numObj.toFixed(2) );//"12345.65"
console.log( numObj.toFixed(8) );//"12345.64890000"
console.log( Number.parseFloat( numObj.toFixed(2) ) );//12345.65

範例開頭示範用 Math.round() 來完成精度修正，也是我一直以來用的方法，接著用 Number.toFixed() 來修正精度，引數代表的是修正精度的位數，範例第三次使用 Number.toFixed() 使用時會用超出位數的方式來修正，會發現結果是把多餘的位數補零，最後要注意 Number.toFixed() 回傳的是字串，而不是 Number ，如果要得到 Number 的結果就要再透過 Number.parseFloat() 來取得。

參考資料

[ developer.mozilla.org ] Number.prototype.toFixed()

 關於 String.charCodeAt()

前言

  JavaScript 有辦法直接取得 unicode 的數值嗎?答案是可行的，透過 String.charCodeAt() 即可，在此把學習的過程做個紀錄。

內容

  範例如下

function getUniCodeString( code ){
  return code.toString(16).padStart( 4,'0');
}
let str = "許功ABC";
console.log( getUniCodeString(str.charCodeAt(0) ) );//8a31
console.log( getUniCodeString(str.charCodeAt(1) ) );//529f
console.log( getUniCodeString(str.charCodeAt(2) ) );//0041

範例的開始有個 getUniCodeString() ，作用是把 unicode 的數字轉乘 16 進制的字串，接著就可以透過 charCodeAt() ，來取得 unicode ，引數識字元的索引，可以看到範例是範例分別對開頭的 3 個字元進行取得。 getUniCodeString() 的最後會透過 String.padStart() 強制把顯示的位數補正成 4 ，這樣可以方便做查詢。

參考資料

[ developer.mozilla.org ] String.prototype.charCodeAt()

 關於 String.padStart() 與 String.padEnd()

前言

  最近發現 String.padStart() 與 String.padEnd() ，抽個空作個學習，在此做個紀錄。

內容

  String.padStart() 與 String.padEnd() 的功能都是填充字串，一個填充在字首，另一個則在字尾，範例如下

const str1 = '5';

console.log(str1.padStart(1, '01'));//5
console.log(str1.padStart(2, '01'));//05
console.log(str1.padStart(3, '01'));//015
console.log(str1.padStart(6, '01'));//010105
//
console.log(str1.padEnd(1, '01'));//5
console.log(str1.padEnd(2, '01'));//50
console.log(str1.padEnd(3, '01'));//501
console.log(str1.padEnd(6, '01'));//501010

這兩個 Function 的參數都是兩個，第一個是"目標字串長度"，第二個則是要填充的字串，範例的第一個都是字串長度"1"，而原本字串的長度也是"1"，所以不會填充任何字串，接著把"目標字串長度"變成"2"會如何?以 String.padStart()  來說會得到"05"，開頭的"0"，其實是要填充的字串的第一個字元，接著長度調成"3"，就會得到"015"，就剛好是要填充的字串加原本的字串，最後把長度調成"6"會怎麼樣呢?會得到"010105"，會看到要填充的字串開始重複， String.padEnd() 的行為與 String.padStart() 一樣，只是將字串填到字尾而已。

參考資料

[ developer.mozilla.org ] String.prototype.padStart()

[ developer.mozilla.org ] String.prototype.padEnd()

 關於 String.endsWith()

前言

  最近發現 String.endsWith() ，抽個空做個學習，在此做個紀錄。

內容

  範例如下

const str1 = 'Hello world';

console.log(str1.endsWith('world'));//true
//
const str2 = 'How are you?';
console.log(str2.endsWith('you'));//false
console.log(str2.endsWith('you',str2.length - 1));//true
//check end of string use regex
const reg = /you[?]$/g;
console.log( reg.test(str2) );//true

String.endsWith() 的功能就是檢查字串結尾有否是某個指定字串，範例的第一次應用直接檢查字串的結尾是否是 'world'，然後他有第二個參數可以輸入，第二個參數是個很不直覺的參數，意思是要檢查的字串長度，如果不輸入時，可以直接想像就是輸入 String.length ，就像第二次應用的開頭一樣，結果會得到 false 是因為結尾應該是有 '?' 的，所以接著透過第二個參數來少檢查一個字元就可以得到 true ，最後範例透過正則表達式來檢查結尾。這個 function 其實可以被正則表達式完全替代，但前提是要先習慣用正則表達式。

參考資料

[ developer.mozilla.org ] String.prototype.endsWith()

 關於 Array.some()

前言

  最近看到 Array.some()  ，抽空做個學習，在此做個紀錄。

內容

  範例如下

const ar1 = [2, 5, 8, 1, 4];
console.log( ar1.some( (x) => x > 10) );//false
//use find()
console.log( ar1.find( (element) => element <= 10) !== undefined );//false

//
const ar2 = [12, 5, 8, 1, 4];
console.log( ar2.some( (x) => x > 10) ); //true
//use find()
console.log( ar2.find( (element) => element <= 10) !== undefined );//true

Array.some()  的功能跟之前的 關於 Array.every() 類似， Array.every() 是當所有元素符合條件就回傳 true ，而 Array.some() 是只要有一個元素都符合條件就回傳 true ，這和之前的 關於 Array.every() 一樣可以用  find() 來替代，範例都有替代的實現。

參考資料

[ developer.mozilla.org ] Array.prototype.some()

相關文章與資料

關於 Array.every()

 關於 Array.indexof()

前言

  在先前的 關於 String.indexOf() 使用過 indexOf() ，但是是在 String ，這次是永用在 Array ，在此把學習的過程做個紀錄。

內容

  範例如下

const array = [2, 9, 9];
console.log( array.indexOf(2) );//0
console.log( array.indexOf(7) );//-1
//
console.log( array.findIndex( (element) => element === 2) );//0
console.log( array.findIndex( (element) => element === 7) );//-1
//
const strArray = ['a1', 'b2', 'c3', 'd4', 'e5', 'f6'];
console.log( strArray.indexOf( 'a1' ) );//0
console.log( strArray.indexOf( 'c7' ) );//-1
//
console.log( strArray.findIndex( (element) => element === 'a1') );//0
console.log( strArray.findIndex( (element) => element === 'c7') );//-1

indexOf() 的功能是搜尋 Array 的元素，回傳第一個搜尋結果的索引值，如果找不到匯回傳 -1 ，範例分別示範使用數字與串的搜尋，但就像 關於 Array.includes() 一樣，其實可以使用 find() 來替代，範例也都分別示範了一次，Array 是有提供 lastIndexOf() 來從最後來找，當然也可以透過 findLast() 來替代。

參考資料

[ developer.mozilla.org ] Array.prototype.indexOf()

相關文章與資料

關於 String.indexOf()

關於 Array.includes()

 關於 Array.includes() 

前言

  最近發現 Array.includes()  ，抽空做個學習，在此做個紀錄。

內容

  範例如下

const array1 = [1, 2, 3];

console.log(array1.includes(2));//true
//Use find()
console.log(array1.find( (element) => element === 2 ) !== undefined );
            

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));//true
//use find()
console.log(pets.find( (element) => element === 'cat' ) !== undefined );

includes() 的功能類似於 find() ，就是搜尋是否含有某個數字或字串，但 find() 也可以做得到，且可以做得更好，所以範例也都附上 find() 實作的版本，總體來說用 includes() 只有比較簡短而已，如果不介意長短就直接用 find() 來取代即可。

參考資料

[ developer.mozilla.org ] Array.prototype.includes()

相關文章與資料

關於 Array.find()

 關於 Array.of()

前言

  今天在 MDN 發現有 Array.of() ，抽個控作個學習，在此做個紀錄。

內容

  範例如下

//Array.of()
console.log( Array.of(7) );       // [7]
console.log( Array.of(1, 2, 3) ); // [1, 2, 3]
//Constructor
console.log( Array(7) );          // [ , , , , , , ]
console.log( Array(1, 2, 3) );    // [1, 2, 3]
//
console.log( [7] ); // [7] 

Array.of() 類似於 Array() 的建構式，不一樣的是當對建構是以一個數字做為引數時事產生對應數量的陣列，而 Array.of() 會產生只有一個數字的陣列，差別就只有這樣，就的方式如果要產生只有一個數字的陣列可以用範例最後的方法來產生，所以這個 function 等於肥有必要一定更換成這個寫法，但要知道有這個語法。

參考資料

[ developer.mozilla.org ] Array.of()

關於 String.repleace() 

前言

  今天發現 String 可以直接用正規表達式來覆蓋字串，在此把學習的過程做個紀錄。

內容

範例如下

const p = 'Dog_dog_Dog';
console.log(p.replace( /Dog/i , 'Cat'));//"Cat_dog_Dog"
console.log(p.replaceAll( /Dog/ig , 'Cat'));//"Cat_Cat_Cat"

用法很簡單，以前的 String.repleace()  的引數 1 輸入的是字串，只要直接輸入正則表達式就可得到結果，使用 repleace() 時，因為只會替代第一個符合條件的結果，所以只有開頭換了，如果要全換，一樣要使用 repleaceAll() ，引數一樣輸入正則表達式，但要注意一下，正則表達式在使用 repleaceAll() 時一定要用 'g' 這個參數，如果不使用會報錯，由於範例有使用 'i' 參數來無視大小寫，所以所有的結果都被交換了。

參考資料

developer.mozilla.org ] String.prototype.replace()

 關於 String.at()

前言

  在先前的 關於 JavaScript 的 使用負值當索引的注意事項 提過 Array.at() ，今天發現 String 也可以使用，在此把學習的過程做個紀錄。

內容

  範例如下

let str = 'abcdefg';
console.log( str.at(-2) );// "f"
let str1 = str.slice(3,5);
console.log(str1);// "de"
//Follow code has trap...
let str2 = str.slice(-2,0);
console.log(str2);// ""
//
let str3 = str.slice(-2);
console.log(str3);// "fg"
//

用法跟 Array.at() 一樣，只是這次是對 String 來操作，跟 Array 一樣，在 Slice() 的時候會有不太直覺的操作，就像範例的"str2"，幸運的是它和 Array 的行為是一致的，只要把字串想成是字元的陣列就可以接受了。

參考資料

[ developer.mozilla.org ] String.prototype.at()

相關文章與資料

關於 JavaScript 的 使用負值當索引的注意事項

 關於 String.indexOf()

前言

  最近發現 String 可以直接搜尋字串，在此做個紀錄。

內容

  範例如下

const str = 'Blue Whale';
console.log( str.indexOf('Blue') );      
console.log( str.indexOf('Blute') );     
console.log( str.indexOf('Whale', 0) );  
console.log( str.indexOf('Whale', 5) );  
console.log( str.indexOf('Whale', 7) ); 
// 0
// -1
// 5
// 5
// -1

使用的方法很簡單，只需把要找的字串當引數即可，如範例的第一次與第二次的使用，回傳的結果是索引值，如果找不到會回傳"-1"，第三次以後會輸入第二個引數，這第二個引數是指定從那個索引值開始找，可以把不輸入引數就是第二個引數輸入 0 的結果。

參考資料

[ developer.mozilla.org ] String.prototype.indexOf()

 關於 Array.every() 

前言

  最近看到 Array.every()  ，抽空做個學習，在此做個紀錄。

內容

  範例如下

const isBelowThreshold = function(currentValue) { 
  //console.log(currentValue);
  return currentValue < 30
};

const array1 = [1, 30, 39, 49, 10, 13];

console.log(array1.every(isBelowThreshold));

//
console.log(array1.find( (element)=>element >= 30) === undefined );

Array.every()  的功能是用來對陣列的每個元素做檢查用的，檢查使用的是個 funciton ，必須還傳 true 或 false ，接著就透過這個 function 來對每個元素做檢查，在"isBlowThreshold"裡使用 console.log() 可以發現會從頭開始檢查，當回傳是 false 的時候就會終止，這讓我想到最近學的 Array.find() ，所以範例用 Array.find() 也實現了一樣的效果，要注意的是檢查的條件也一點點改變。這個功能幾乎可以被 Array.find() 給替代，而且 Array.every() 只支援從頭開始檢查，而 Array.find() 卻可以透過 Array.findLast() 來從尾開始檢查，所以可以的話就用 Array.find() 來替代吧。

參考資料

[ developer.mozilla.org ] Array.prototype.every()

相關文章與資料

關於 Array.find()

 關於 Array.flat() 

前言

  最近看到 Array.flat()  ，抽個空作個學習，在此做個紀錄。

內容

  範例如下

const arr1 = [0, 1, 2, [3, 4] ];

console.log(arr1.flat());

const arr2 = [5, 6, [7], [[[8, 9]]]];

console.log(arr2.flat(3));
// [0, 1, 2, 3, 4]
// [5, 6, 7, 8, 9]

Array.flat()  的功能是擺陣列裡的陣列展開，可以看到範例的第一次使用後，後方的陣列被"展開"了，第二次使用時有輸入一個引數，這個引數是用來設定最多展開的次數，所以後方的"[[[8,9]]]"就會直接被展開，也可以把ˇ不輸入引數時想成"flat(1)"。

參考資料

[ developer.mozilla.org ] Array.prototype.flat()

 關於 Array.find()

前言

  最近發現 ECMA Script  的 2023 的 新標準新增的 findLast() 與 findLastIndex() ，抽空做個學習，在此做個紀錄。

內容

  在先前的標準就有 find() 與 findIndex() ，用途是找尋陣列裡的元素，可以透過引數來決定尋找的條件， find() 找的是內容 ， findIndex() 找的是索引值，範例如下

const array1 = [5, 12, 130, 70, 44];
//
const found = array1.find((element) => element > 45);

console.log(`findValue:${found}`);
//
const foundIndex = array1.findIndex((element) => element > 45);

console.log(`findIndex:${foundIndex}`);
//
const foundLast = array1.findLast((element) => element > 45);

console.log(`findLastValue:${foundLast}`);
//
const foundLastIndex = array1.findLastIndex((element) => element > 45);

console.log(`findLastIndex:${foundLastIndex}`);
// "findValue:130"
// "findIndex:2"
// "findLastValue:70"
// "findLastIndex:3"

範例示範了用同一個條件對同一個陣列做找尋的結果， findLast() 與 findLastIndex() 就如同字面上的意思是從陣列的最後開始找，所以 find() 的結果是 130 ， findLast() 的結果是 70  ，而 findLastIndex() 就是 findLast() 回傳索引值的版本。 

參考資料

[ developer.mozilla.org ] Array.prototype.find()

 關於 Promise 的 any()

前言

  最近發現 Promise 還有個 any() ，抽個空作個學習，在此做個紀錄。

內容

  範例如下

function promise(num, time = 50) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`num:${ num } is done`);
      (num>0) ? resolve(`value:${num}, 成功`) : reject(`value:${num},失敗`);
    }, time);
  });
}
Promise.any([promise(0,5000), promise(2,500), promise(3, 1000)])
  .then(res => {
    console.log(res);
  })
  .catch(res =>{
    console.log(res);
  
  })
  .finally(() => {
    console.log(`It's done`);
    console.log(`finally block `);
  });
// "num:2 is done"
// "value:2, 成功"
// "It's done"
// "finally block "
// "num:3 is done"
// "num:0 is done"

Promise.any() 一樣是一次啟動多個 Promise ，但跟之前的 Promise.all() 或 Promise.allSettled() 不一樣的是它只要其中一個 Promise 進入 resolve() 或 reject() 就開始喚起 then() 或 catch() ，範例的" num:2" 會最快完成，所以 500ms 就進入了 then() ，之後就 finally() ，但可以看到跑完 finally() 後，" num:0" 與 " num:3" 還是會繼續跑，但不會進到任何一個 then() 或 catch()。

參考資料

[ developer.mozilla.org ] Promise.any()

 關於 Promise 的 allSettled()

前言

  最近發現 Promise 還有個 allSettled() ，抽個空作個學習，在此做個紀錄。

內容

  先看範例

function promise(num, time = 50) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (num>0) ? resolve(`value:${num}, 成功`) : reject(`value:${num},失敗`);
    }, time);
  });
}
Promise.allSettled([promise(0,5000), promise(2,500), promise(3, 1000)])
  .then(res => {
    console.log(res);
  })
  .catch(res =>{
    console.log(res);
  
  })
  .finally(() => {
    console.log(`It's done`);
    console.log(`finally block `);
  });
// [[object Object] {
//   reason: "value:0,失敗",
//   status: "rejected"
// }, [object Object] {
//   status: "fulfilled",
//   value: "value:2, 成功"
// }, [object Object] {
//   status: "fulfilled",
//   value: "value:3, 成功"
// }]
// "It's done"
// "finally block "

allSettled() 的功能與 all() 類似，都是同時啟動多個 Promise， 差別在於 all() 只會喚起 then() 或 catch() 一次 ，但 allSettled() 會讓每個 Promise 都跑 then() 或 catch()，而且要注意回傳的是一個物件，並不是 resolve() 或 reject() 的引數，但可以在物件的屬性中提取該值，並且注意 then() 與 catch() 回傳物件的屬性名稱是不一樣的， then() 的是"reason"，而 catch() 的是"value"，最後範例會用 finally() 來印出完成，這粒可以可看出 allSettled() 並不是每個 Promise 一完成就直接跑 then() 或 catch() ，而是等所有的 Promise 都跑完後才跑所有的 then() 或 catch() 。

參考資料

[ developer.mozilla.org ] Promise.allSettled()

 關於for await 

前言

  在先前的 初探 async 與 await 介紹了 await 的基本用法，最近發現可以搭配 for 來使用，在此把學習的過程做個紀錄。

內容

  範例如下

// noprotect
function resolveByTime(x, waitTime) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, waitTime);
  });
}
//
const promises = [
  resolveByTime(1,1000), 
  resolveByTime(2,5000), 
  resolveByTime(3,2000) ];

//
(async function () {
  for await (const item of promises) {
    console.log(`[for await...of] result: ${ item }`);
  }
})();

//
(async function () {
  for (const item of promises) {
    const result = await item;
    console.log(`[for...of] result: ${ result }` );
  }
})();

開頭的註解"// noprotect" 是為了讓 Jsbin 可以正常運作加的，請勿省略。範例有一個 Promise 的陣列，裡面有三個 Promise ，接著就利用 async function 來使用 for await ... of 的方式來啟動每個 Promise，接著會再使用 for...of 的方式啟動每個 Promise ，如果只看語意的結果可能會認為 for await ... of 會同時啟動每個 Promise ，而 for...of  會啟動完一個 Promise 後才啟動下一個，但不幸的是結果並非如此!就結果來看，不論是 for await ... of  或 for...of  都會同時啟動每個 Promise ，for 迴圈的內容會照陣列的順序進行 await ，範例會先顯示第一個 Promise 的結果後，等一段時間後會同時完成第二與第三個 Promise ，因為等待完第二個以後第三個就會馬上完成，因為第三個的時間比第二個短，加上 Promise 是同時啟動的，所以第二個顯示完就馬上顯示第三個。

參考資料

[ pjchender.dev ] [JS] Async and Await in JavaScript

相關文章與資料

初探 async 與 await

初探 async 與 await

前言

  async 是 JavaScript 的新標準，抽個空做個學習，在此做個紀錄。

內容

  async 是異步的意思，可以宣告異步 function 來完成異步執行，並且必須回傳 Promise 物件，而 await 是專門搭配 async function 使用的語法，範例如下

function resolveByTime(x, waitTime) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, waitTime);
  });
}


async function add1(x) {
  const a = await resolveByTime(20, 2000);
  const b = await resolveByTime(30, 2000);
  return a + b;
}

add1(20).then(v => {
  console.log(v);  // prints 70 after 4 seconds.
});
//
async function add2(x) {
  const a =  resolveByTime(20, 2000);
  const b =  resolveByTime(30, 7000);
  return x + await a + await b;
}
console.log('start');

add2(20).then(v => {
  console.log(v);  // prints 70 after 7 seconds.
});

resolveByTime() 是一個可以用輸入引數來決定 Promise() 的執行時間的 function ，並且回傳第一個引數作為結果，接著可以看到 add1() ，在開頭可以看到 async 的語法，宣告後就可已在該 fumction 裡使用 await 語法，await 使用在 function 之前，且該 function 必須回傳 Promise ， resolveByTime()  雖然回傳的結果是 Promise ，但搭配 await 使用時，回傳的結果會是 resolve() 的引數，以 resolveByTime() 來說，就是回傳第一個引數，所以第一個使用 await 可以解釋成等待 2 秒後回傳 20 ，接著又做了一次 await ，不過這次回傳的結果是 30 ，接著執行 add1() ，要注意執行時請當它是一個 Promise 來執行，所以可以直接喚起 then() ，接著又宣告了 add2() ，一樣是 async function ，這次的用法不太一樣，可以看到  resolveByTime() 前不加 await 了，而是在使用結果的變數前加 await ，有什麼差別呢? add1() 的用法第一個  resolveByTime() 在執行完前，第二個 resolveByTime() 不會被執行，所以 add1() 的執行時間是 4 秒 ，在 add2() 的 resolveByTime()  會被同時啟動，所以執行時間是 7 秒 ，最後在注意的是執行 add1() 與 add2() 的總共時間並不是 11 秒 ，而是 7 秒! add1() 執行後程式並不會停下來等待結果，而是馬上執行 add2()。

參考資料

[ developer.mozilla.org ] async function

 關於 Array.reduce() 

前言

  最近看到了 Array.reduce() ，抽空做個學習，在此做個紀錄。

內容

  Array.reduce() 會逐一取得每個陣列元素並做處理，但這跟 Array.forEach() 不是一樣嗎?先看看範例

const array1 = [1, 2, 3, 4];

//
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(`sum:${sumWithInitial}`);//10
//
let sumByForEach = 0;
array1.forEach( function(value) {
  sumByForEach += value;
});

console.log(`sum use foreach:${sumByForEach}`);//10

Array..reduce() 的引數有兩個，第一個引數是個 funciton ，用來處理每個元素，但它的引數是先前的元素與現在的元素，第二個引數是初始值，最後範例用  Array.forEach() 來做一樣的是來比較差異性，差異是 Array.forEach() 的總和值是在外面給的，但 Array..reduce() 可以不用給，會自動產生，並且可以用 return 值來接收這個數值，差異就是少了一行來產生這個數值。

參考資料

[ developer.mozilla.org ] Array.prototype.reduce()

 關於 Promise 的 race()

前言

  在上次的 並列執行 Promise 中使用 Promise.all() 來並列執行 Promise ，查了一下有個很像的 function ，就是 Promise.race() ，就來做個學習，在此做個紀錄。

內容

  範例如下

function promise(num, time = 50) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (num>0) ? resolve(`value:${num}, 成功`) : reject(`value:${num},失敗`);
    }, time);
  });
}
Promise.race([promise(1,3000), promise(2,500), promise(3, 1000)])
  .then(res => {
    console.log(res);
  })
  .catch(res =>{
    console.log(res);
  
  });
//value:2, 成功

Promise.race() 跟 Promise.all()  的用法很像，都是傳入多個 Promise ，但不一樣的地方是 Promise.race() 會在第一個發生 resolve() 或 reject() 的 Promise 發生後就進到 then() 或 catch() ，範例會回傳第二個結果是因為第二個最快完成，但其它的 Promise 還是會各自完成，只是不會進到 then() 或 catch() 了。

參考資料

[ 卡斯伯的 Blog ] JavaScript Promise 全介紹

相關文章與資料

並列執行 Promise

 並列執行 Promise

前言

  在先前的 初探 Promise 提過 Promise 的基本應用， Promise 總是一個使用完在到下一個，如果要同時使用 Promise 該如何做?在此把學習的過程做個紀錄。

內容

  範例如下

function promise(num, time = 50) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (num>0) ? resolve(`value:${num}, 成功`) : reject(`value:${num},失敗`);
    }, time);
  });
}
Promise.all([promise(1), promise(2), promise(3, 300)])
  .then(res => {
    console.log(res);
  })
  .catch(res =>{
    console.log(res);
  
  });
//["value:1, 成功", "value:2, 成功", "value:3, 成功"]

要並列執行必須透過 Promise.all() ，只要將引數裡傳入裝有每個都是 Promise 的陣列就可以並列執行，接著就和一般的 Promise 一樣使用 then() 與 catch() 來接收，但回傳的引數有不同的意義，then() 的引數會是包含著每個 Promise 成功拾回傳值得陣列， catch() 這邊只能回傳第一個發生失敗的 Promise 回傳值，這點要注意。

參考資料

[ 卡斯伯的 Blog ] JavaScript Promise 全介紹

相關文章與資料

初探 Promise

 hasOwn() 與 hasOwnProperty() 的差異

前言

  JavaScript 的新標準裡有個 hasOwn() ，抽個空來做個學習，在此做個紀錄。

內容

  查了一下發現這個 funciton 跟舊有的 hasOwnProperty() 很有關係，是新標準用來替換舊有的，它們的差異可以參考範例。

  範例如下

let person = {
  hasOwnProperty: function() {
    return false;
  },
  age: 35
};
 
console.log( Object.hasOwn(person, 'age') ); // true
console.log( person.hasOwnProperty( 'age' ) ); // false

範例的'person'裡有一個 hasOwnProperty() ，這個 function 會在 person.hasOwnProperty() 時喚起造成覆蓋的現象，但是 hasOwn() 沒這個麻煩。

  根據 [ developer.mozilla.org ] Object.hasOwn() 裡的說明，這個新增的 function 就是要替代舊有的 hasOwnProperty() ，所以就直接替代即可。  

參考資料

[ stackoverflow.com ] Object.hasOwn() vs Object.prototype.hasOwnProperty()

[ developer.mozilla.org ] Object.hasOwn()

 關於 Promise 的喚起順序

前言

  這次是續上次的 初探 Promise 後再次學習 Promise  ，上次並沒有把 then() 與 catch() 用的比較複雜，事實上是可以做出很複雜的喚起，要做複雜的喚起時，順序就很重要，在此把學習的過程做個紀錄。

內容

  範例如下

function promise(val) {
  return new Promise((resolve, reject) => {
    if (val != 0) 
    	resolve('成功');
    else
    	reject('失敗');
  });
}
//
promise(1)
  .then(success => {
    console.log(success);
    console.log(`then block 0`);
    return promise(1);
  })
  .then(success => {
    console.log(success);
    console.log(`then block 1`);
    return promise(0);
  })
  .catch(fail => {
    console.log(fail);
    console.log(`catch block 0`);
    return promise(1);
  })
  .then(success => {
    console.log(success);
    console.log(`then block 2`);
  })
  .catch(fail => {
    console.log(fail);
    console.log(`catch block 1`);
  })
  .finally(() => {
    console.log(`It's done`);
    console.log(`finally block `);
  });
//
// "成功"
// "then block 0"
// "成功"
// "then block 1"
// "失敗"
// "catch block 0"
// "成功"
// "then block 2"
// "It's done"
// "finally block "

這次的範例是將 初探 Promise 裡的範例做一些改變來組成， promise() 需要輸入一個值來決定成功或失敗， 初探 Promise 的範例把 catch() 放最後可能會讓人誤會 catch() 一定放最後，但 Promise 其實是可以多次 catch() 的，範例在"then block 1"裡蓄意失敗，這個時候會跳到"catch block 0"，"catch block 0" 由於成功，所以跳到"then block 2"，這次範例還多了個 finally() 這個才是一定要放最後的，只要 Promise 執行完就一定會執行，不論是成功或失敗！這次要注意"catch block 0" 的最後要再喚起 promise() ，這樣才能接到"then block 2"或"catch block 1"，"then block 2"或"catch block 1"的最後都不需要再喚起 promise() ，如果有喚起的話，就需要更多的 then() 與 catch() 來承接。

參考資料

[ 卡斯伯的 Blog ] JavaScript Promise 全介紹

[ developer.mozilla.org ] 使用 Promise

相關文章與資料

初探 Promise

 初探 Promise

前言

  最近學習 JavaScript 的 Promise ，在此把學習的過程做個紀錄。

內容

  範例如下

function promise() {
  return new Promise((resolve, reject) => {
    if (Math.random() > 0.5 ) 
    	resolve('成功');
    else
    	reject('失敗');
  });
}
//
promise()
  .then((success) => {
    console.log(success);
  }, (fail) => {
    console.log(fail);
  })
//
promise()
  .then(success => {
    console.log(success);
  })
  .catch(fail => {
    console.log(fail);
  });
//
promise()
  .then(success => {
    console.log(success);
    return promise();
  })
  .then(success => {
    console.log(success);
  })
  .catch(fail => {
    console.log(fail);
  });

先看到範例開頭的 promise()，裡面會用到 Promise() ，這是新標準新增的 Funciton ，也是這次的主角，引數是一個 Funciton ， Function 會有兩個引數，第一個引數是'resolve'，第二個引數是'reject'，這兩個引數的型態都是 Function ，範例在取亂數後如果大於 0.5 ，就喚起 resolve() ，否則就喚起 reject()，就著就是第一次實際使用 promise() ， promise() 可以喚起 then() 來執行 Promise 物件裡的 Function ，也就是有 resolve 與 reject 引數的 Function ，第一個範例會對 then()  傳入成功與失敗對應的 Funciton ， 成功對應 resolve()  ，失敗對應 reject() ，接著第二次實際使用的用法沒有傳入失敗的引述，反倒在 then() 結束後會再執行 catch() ，這個 catch() 會在then() 失敗時被喚起，如果同時傳入失敗的引數又使用 catch() 時，catch() 就不會被執行，最後看到第三個範例，在第一個成功時會再次喚起 promise() 一次，但要注意喚起前要加 return 來喚起，這樣就會變成第一次如果成功就會喚起第二次的 then () ，這裡要注意不論是第一次或第二次的 then() 失敗都會喚起  catch() ，如果無法用語法來理解喚起的原因沒關係，可以把這個用法當作是一種格式，只要記得成功與失敗時哪被執行即可。

參考資料

[ 卡斯伯的 Blog ] JavaScript Promise 全介紹

 解決 Windows 10 開機後卡輸入的問題

前言

  最近筆電開機後會有很長的時間無法從鍵盤輸入任何東西的奇怪現象，在此把解決的過程做個紀錄。

內容

  Windows 10 在剛出時使用起來還滿順的，但經過 Windows Update 的無數次摧殘後，變成每次開機後雖然看的到桌面，但實際打開應用程式就會發現要開很久應用程式才會開啟，但這情形最近越來越嚴重，在 Chrome 已經在開啟的狀態下，鍵盤會長期無法輸入任何東西，但滑鼠卻可以，這情形嚴重時可以高達 30 分鐘，也就是我開機後要等 30 分鐘才能用鍵盤輸入東西，於是我打開工作管理員發現硬碟永遠是佔滿的，但最近發現一個新的佔用硬碟的應用程式，名為"Cryptographic Services"，本以為是中毒了，但查了一下發現他是 Windows 10 自帶的應用程式，而且是用服務的方式來開啟，要關閉的話請如下圖操作

停止"Cryptographic Services"服務，並將啟動類型改成手動

在"服務"的視窗裡找到"Cryptographic Services"，透過右鍵選單停止該服務，並透過右鍵選單裡的內容裡，將啟動類型改成"手動"，改完後狀況好上不少。

  雖說關閉"Cryptographic Services"可以減少開機後被卡鍵盤輸入的時間，但其實不能完全改善，關完後大概會卡 5 分鐘，看工作管理員裡佔用硬碟的還有一個兇手，Windows Update，不過由於我是家用版無法關閉，除非斷網或改用SSD或買專業版，不然看來是無解了，Windows 10 真是個讓人難以喜歡的作業系統。

參考資料

[ docs.microsoft.com ] Windows 10 Cryptographic service high disk usage

 檢查陣列是否有某個元素的 Function

前言

  最近發現 JavaScript 裡的 Array 裡有一個 includes() ，由於之前沒看過，在此把學習的過程做個紀錄。

內容

  查了一下是 ES7(2016) 加入的，主要的功能是檢查陣列是否有某個元素，用法如下

let numAr = [ 0 , 12 , 34 , 56 , 789 ];
console.log( numAr.includes( 12 ) );//true
let strAr = [ 'a' , 'bc' , 'cde' , 'fgh' , 'IJK'];
console.log( strAr.includes( 'cde' ) );//true
let mixAr = [ 1 , 'bc' , 3 , 'fgh' , 5];
console.log( mixAr.includes( 'fgh' ) );//true

範例的第一個例子是檢查數字的陣列，把要檢查的元素輸入 includes() 來檢查，就可以得到結果的布林值，第二個例子檢查的是字串的陣列，用法是一樣的，但我記得 JavaScript 的陣列可以放不同的元素在陣列，所以我實驗了混和了不同元素的陣列，結果是工作正常。 includes() 用起來雖然好用，但無法得知目標元素的索引值，這算是比較可惜的部分。

參考資料

[ developer.mozilla.org ] Array.prototype.includes()

[ segmentfault.com ] JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

 初探 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 ] 正則表達式在線測試工具

 在正則表達式過濾特定開頭的寫法

前言

  在之前的 在正則表達式過濾特定結尾的寫法 有過濾特定字尾的寫法，由於在 [ developer.mozilla.org ] 正規表達式 裡只介紹"過濾特定字尾"，但最近發現"過濾特定開頭"的寫法，在此把學習的過程做個紀錄。

內容

  最近在 [ zh.wikipedia.org ] 正規表示式 裡發現有"過濾特定開頭"的寫法，範例如下

過濾特定開頭的寫法

正則表達式的寫法是"?<="，範例中符合條件的只有"Windows"，這就是和之前的 在正則表達式過濾特定結尾的寫法 相反的寫法。

  本以為在 [ developer.mozilla.org ] 正規表達式 裡已是全部的寫法了，但 [ zh.wikipedia.org ] 正規表示式 裡介紹的比較全，這次的學習就到此結束。

參考資料

[ developer.mozilla.org ] 正規表達式

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

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

相關文章與資料

在正則表達式過濾特定結尾的寫法

 正則表達式的檢查非換行字元

前言

  最近看到正則表達式裡有"."的寫法，在此做個紀錄。

內容

  "."的寫法範例如下

"."的用法

查了一下 [ developer.mozilla.org ] 正規表達式 後解說如下"匹配除了換行符號之外的單一字元"，在範例裡所有有"n"的內容都匹配了，但最後一個"n"卻不匹配，原因是因為它前方有換行符號，所以"."也可以換成"[^\r\n]"，不過"."比較簡短就是了。

參考資料

[ developer.mozilla.org ] 正規表達式

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

在正則表達式過濾特定結尾的寫法 

前言

  在 [ developer.mozilla.org ] 正規表達式 裡發現有個寫法我從來沒用過，在此把學習的過程做個紀錄。

內容

  在 [ developer.mozilla.org ] 正規表達式 裡發現有個寫法是過濾特定結尾的寫法，語法是"x(?=y)"與"x(?!y)"，"x" 的部分是要取得的開頭，"y"的部分則為結尾，"?="表示符合的結尾是結果，"?!"代表的是不符合的結尾是結果，聽起來有點難懂，可以利用 [ coding.tools ] 正則表達式在線測試工具 來實驗，實驗結果如下

使用"?="的寫法

使用"?!"的寫法

在使用"?="的寫法可以看到"That"並不會被當結果，只有"This"被當成結果，且結果只有"Th"的部分，並不包含"is"，所以這個語法可以把它解釋成過濾特定結尾，"?!"的寫法其實就是相反的邏輯，不符合的結尾都是結果，所以只有"That"是結果，這兩個語法可以搭配"|"來過濾不同的結尾。

  這個寫法是專門針對結尾有特定規則的應用，目前沒想到哪裡用的到，不過還是學習了。

參考資料

[ developer.mozilla.org ] 正規表達式

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

 正則表達式的剃除字元的用法

前言

  最近發現正則表達式有剃除字元的用法，雖然還沒想到在哪可以用到，但還是仔此做個紀錄。

內容

  一般如果要用正則表達式檢查單一數字會使用"\d"，有或是"[0-9]"，中括弧內可以自由地填入允許的字元，但最近發現有相反的寫法，如果要除了數字以外都允許的話，可以寫作"[^0-9]"，又或可以用"\D"來代表，用法看起來相當直覺，所以我做了"[^\D]"，這樣的結果其實和"[\d]"是一致的，可以把"^"當作是"反閘"的邏輯來想，這可能不讓人困惑，那如果是"[\d\D]"呢?，這樣會變成任何的字元都符合條件，可以想成中括弧內的字元都是用"或閘"邏輯來連結，還有一件有趣的事是通常"[\D]"可以寫作"[^0-9]"，但如果把"[\d\D]"寫成"[\d^0-9]"，會發現結果不正確!這是因為"^"要放在開頭才有效果，如果放在非開頭會判為允許"^"字元，這點請注意。

參考資料

[ developer.mozilla.org ] 正規表達式

 正規表達式的括弧的另一種用法

前言

  在前一篇 關於正規表達式的括弧 裡介紹了括弧的用法，但每個括弧都會被記錄會沒有彈性，有辦法有的括弧要被記錄有的括弧不被紀錄嗎?答案是肯定的，在五把學習的過程駔個紀錄。

內容

  範例如下

const reg = /(?:\d+)_(\d+)/dg;
let s = '123_456,12_34';
for( const match of s.matchAll(reg) ){
  console.log(match.indices );
}
//[[0, 7], [4, 7]]
//[[8, 13], [11, 13]]

只要在括弧的開頭加上"?:"，就可以標記不要輸出結果，範例的結果變成兩個，對比上次 關於正規表達式的括弧 的範例就可以發現少了有加註"?:"的結果，這樣就可以製作出有彈性的結果。

參考資料

[ developer.mozilla.org ] 正規表達式

相關文章與資料

關於正規表達式的括弧

 關於正規表達式的括弧

前言

  最近發現正規表達式的括弧有"標記"的作用，在此把學習的過程做個紀錄。

內容

  範例如下

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

先看到範例的第一個結果，陣列會先回傳整個符合正規表達式的結果，接著結果陣列還會有兩個結果，這兩個結果會對應到正規表達式裡的兩個括弧，它代表著括弧的開頭和結束指標，利用這個括弧的特性就可以取得"123"與"456"的位址，如果將原本的正規表達式的括弧移除，一樣可以做到整個結果的比對，但無法取得"123"與"456"的位址，括弧就像"標記"一樣，可以取得要比對的內容裡的特定字串的位址，搭配 JavaScript 2022 在正規表達式的新標準 的用法可以不只比對結果還可快速找到結果的特定字串。

參考資料

[ developer.mozilla.org ] 正規表達式

相關文章與資料

JavaScript 2022 在正規表達式的新標準

 手機號碼的正規表達式

前言

  最近寫了手機號碼的正規表達式，在此做個紀錄。

內容

  在網上搜尋會達到以下

^09[\d]{8}$

不過這個病不支援以+886開頭的格式，所以我改成以下

^(09|\+886)[\d]{8}$

這是我第一次用"|"，要記得把內容用"()"區隔和後面的連續 8 個數字，並記得 +886 的"+"要在前面補一個"\"，不然會跟正規表達式的"+"混淆。

參考資料

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

 關於 E-mail 的正規表達式

前言

  最今寫了 E-mail 的正規表達式，但上網查了一下答案遽然和我想得不太一樣，仔此把學習的過程做個紀錄。

內容

  首先我認為 E-mail 的正規表達式如下

^([a-z0-9_\.-]+)@([\da-z\.-]+)$

可以使用之前的工具 線上使用正規表達式 來驗證，如下圖

我認為 E-mail 的正規表達式

但上網對了一下答案發現遽然不一樣，答案如下

^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$

前半段是一樣的，不一樣的部分在最後的部分，也就是最後的網域一定是由 2~6 的字所組成，只能說還好我有對答案，不然就只能等原本的寫法發生問題才能發現了。

參考資料

[ www.fooish.com ] Regex Examples

相關文章與資料

線上使用正規表達式

 考慮使用 Decimal 來解決精度的問題

前言

  最近在 Python 發生 round() 無法正常四捨五入的問題，在網上查詢後發現 Python 的 float 會有精度的問題，在此把學習的過程做個紀錄。

內容

  範例如下

from decimal import Decimal,ROUND_HALF_UP
print(round(1.115, 2) )#1.11
print(Decimal('1.115').quantize(Decimal('.00'), ROUND_HALF_UP) )#1.12

1.115 在作 round() 會期望得到 1.12 ，但事實上卻是 1.11 ，要解決這個問題要透過 decimal 模組提供的 Decimal 來處理精度的問題，要四捨五入時透過 quantize()  來完成，這樣就可以得到期望的 1.12 。

參考資料

[ kirin.idv.tw ] Python – decimal 模組教學 – 四捨五入的正確作法

JavaScript 2022 在正規表達式的新標準

前言

  最近發現 JavaScript 2022 有對正規表達式新增寫法，抽空做個學習，在此做個紀錄。

內容

  JavaScript 2022 有新增一個"d"的旗標給正規表達式，可以方便取得結果的文字的開頭與結尾，在先前的 在 JavaScript 的正規表達式取得比對結果的索引值 用的方法僅能找到開頭，範例如下

const regexp = /test\d/g; //without the /d flag
const regexp2022 = /test\d/dg; //with the /d flag
const str="test1test2";
const array = [...str.matchAll(regexp)];
const array2022 = [...str.matchAll(regexp2022)];
console.log(array[0].indices);//undefined
console.log(array2022[0].indices);//[[0, 5]]

使用的方法就是在正規表達式上加一個"d"的旗標，這樣回傳結果時會多一個"indices"的變數，跟之前在 在 JavaScript 的正規表達式取得比對結果的索引值 用"index"做發法不同，"index"僅有開頭並不包結尾，"indices"則會包含開頭與結尾。

參考資料

[ prog.world ] Work Proposals Included in the Coming ECMAScript 2022 Standard for JavaScript 

相關文章與資料

在 JavaScript 的正規表達式取得比對結果的索引值

在 Python 比對中文字串

 在 Python 比對字串

前言

  以前一直有不要在 Python 處理中文的印象，但最近發現 Python3 以後對中文字串已改善，並順便做個學習，在此做個紀錄。

內容

  最近都在用正則表達式，發現就算用中文有沒太大的問題，但那是 JavaScript ，在 Python 也是如此嗎?就結果來說是的，由於我入門 Python 時是在  2 的時期，那時的中文處理很麻煩加上當時我用不到，所以留下了盡量不要用 Python 來處理中文字串的印象，但最近一查發現 Python3 以後對於中文字串處理就變得相當友善，實際範例如下

str = '一'
if str == '一':
    print('equal')
if str in '一二':
    print('contained')
print(str.find('一二')!=-1)#False

要比對字串是否相等時使用"=="就可以，第二個應用是使用"in"來確定字串是否在某個字串裡，這個用法非常直覺，第三個應用是使用"find()"，但要注意"find()"的結果是回傳字串的索引值，如果找不到匯回傳"-1"。

參考資料

[ blog.csdn.net ] python 中文字符串比较

 用正則表達式檢查中文

前言

  最近想了一下正則表達式的一些應用，發現似乎沒用過它來檢查中文過，所以就抽空來研究一下，在此做個紀錄。

內容

  這次會使用到 [ coding.tools ] 正則表達式在線測試工具 來做為驗證，如何使用可以參考 線上使用正規表達式。實驗了一下發現遽然可以直接輸入，如下圖

用正則表達式檢查中文

本以為這是線上工具的貼心設計，所以我實際打了個程式碼來驗證，如下

const reg = /一二/g;
let s = '一二..';
console.log( reg.test(s) );//true

結果正確，真的可以直接輸入!如果要檢查所有的中文字可以用 [/u4e00-/u9faf] 來檢查一個中文字。

  不知是不是我對 JavaScript 的偏見，總是認為在 JavaScript 使用中文位很麻煩，必須不斷把字串轉成字碼再搭配"\u"來表達，但現在的 JavaScript 遽然可以直接就檢查中文，真是讓我改觀了。

參考資料

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

[ www.itread01.com ] 匹配中文字符的正則表達式： [/u4e00-/u9fa5]

相關文章與資料

線上使用正規表達式

 線上使用正規表達式

前言

  每次使用正規表達式都要打程式碼會不會覺得很麻煩呢?這次介紹可以在線上使用正規表達式，而且可以馬上得到結果，不須像打程式碼還要按"Run"得到結果，在此做個紀錄。

內容

  使用的線上工具式是 [ coding.tools ] 正則表達式在線測試工具 ，使用的畫面如下

正規表達是在線測試工具的使用畫面

在畫面"1"處輸入正規表達式，在畫面"2"處就是要檢查的內容，工具會把符合的結果反白，這是即時的不須按下任何的按鍵，用起來相當直覺簡單。

  接著提供一些常用的技巧，如果要檢查不是多行，只是單行字串符合某種格式的的話，可以參考以下

^ *ABC *$

上述的例子會檢查去頭尾空白並且中間有"ABC"，利用"^"與"$"來放頭尾即可，如果要檢查多行的結果這就不適合，之前的 用正規表達式檢查IP 就有使用這個方法。善用"[]"來限制符合條件的字元，如果要檢查字母後有數字的結果可以使用以下

[A-Za-z]+\d+

範例限定大小字母才能符合資格，接著要搭配"+"，"+"指的是前面的結果至少出現 1 次，如果有需要還可以搭配"*"與"?"，"*"是指前面的結果出現 0 次或多次，"?"是指前面的結果出現 0 次或 1 次。如果要檢查帶有小數的數字可以用以下

\d+(.\d+)?

這次要使用"()"來包覆結果，並搭配檢查次數的"?"(檢查前面的結果出現 0 次或 1 次)。如果要檢查"()"包覆的內容可以用以下

\(.*\)

利用"\"後加特殊字元來表明"()"，範例中的"."指的是任意字元，所以".*"就可以解釋成任意字元出現 0 次或多次。

參考資料

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

相關資料與文章

用正規表達式檢查IP

 用 Python 的正規表達式檢查IP

前言

  在先前的 用正規表達式檢查IP 裡使用正規表達式來檢查 IP ，這次用 Python 來完成，在此做個紀錄。

內容

  範例如下

import re
str = '128.0.0.1'
regEx = re.compile( '^((\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.){3}(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))$' )
#check is match?
res = regEx.search( str )
if res is not None:
    print('Match')
else:
    print('Not match')

這次的正規表達式可以參照 用正規表達式檢查IP 裡的作法，但這次字串的字尾不須加"."，所以正規表達式看起來相當冗長，單純的將上一次的正規表達式的檢查次數由 4 次改成三次，並在"."後新增檢查 255 的正規表達式即可，這裡用起來跟 JavaScript 的感覺是一樣的。

相關文章與資料

用正規表達式檢查IP

 用正規表達式檢查IP

前言

  在先前的 在 JavaScript 初探正規表達式 裡基本的使用了正規表達式，這次練習用正規表達式來檢查IP，在此把學習的過程做個紀錄。

內容

  範例如下

const reg0_9 = /^(\d)$/;
const reg0_99 = /^(\d|[1-9]\d)$/;
const reg0_999 = /^(\d|[1-9]\d|[1-9]\d\d)$/;
const reg0_255 = /^(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))$/;
let num = '256';

console.log( `reg0-9:${reg0_9.test(num)}` );//
console.log( `reg0-99:${reg0_99.test(num)}` );//
console.log( `reg0-999:${reg0_999.test(num)}` );//
console.log( `reg0-255:${reg0_255.test(num)}` );//

const regIP4 = /^((\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.){4}$/;
let ipStr = '0.255.255.255.';
console.log( `regIP4:${regIP4.test(ipStr)}` );//

要檢查IP的字串前要先學會如何檢查數字字串，範例先示範檢查 0 ~ 9 ，這裡要注意字首與字尾的寫法，如果只寫"\d"，就無法檢查只有一個數字，而會變成裡面只要有數字，接著檢查 0 ~ 99 ，不幸的寫法不是"\d\d"，因為像"01"這樣的寫法會過關，所以透過"|"的寫法配合，當位數只有1位數，就使用"\d"，兩位數的時候就"[1-9]\d"，這是檢查 10 ~ 99 ，接著示範 0 ~ 999 ，邏輯跟 0 ~ 99 的時候差不多，但要多加 100 ~ 999 的檢查，接著重點來了，如何檢查 0 ~ 255 呢? 要多檢查 100 ~ 199 ，透過"1\d\d"，那 200 ~ 255 呢?這裡要把 200 ~ 249 與 250 ~255 隔開，所以寫法變成"2([0-4]\d|5[0-5])"。

  在學會了如何檢查 0 ~ 255 ，接著就可以檢查 IP ， IP 字串可以想像成 (0_255).(0_255).(0_255).(0_255) ，範例透過與語法連續檢查 4 次，但要注意這個方法檢查時， IP 的字尾要多加"."，這是為了讓正規表達式看起來簡潔。

參考資料

[ www.itread01.com ] 效率最快的 IPv4 和 IPv6 正則表示式

相關文章與資料

在 JavaScript 初探正規表達式

 在 Windows 分割硬碟

前言

  最近添購新的硬碟後發現我從沒在 Windows 裡分割硬碟，我都是在安裝 Windows 時附帶的分割程式裡分割，所以就做個學習，在此做個紀錄。

內容

  分割的方法意外的滿簡單的，先將硬碟的硬體裝好後開機，開機後在"本機"裡會看不到新增的硬碟，原因是硬碟還未分割，在 Windows 的"本機" 的 Icon 按下右鍵並選擇管理，如下圖

開啟"電腦管理"

在開始裡搜尋"電腦管理"也可以得到一樣的結果，在"電腦管理"裡點選"磁碟管理"，如下圖

選擇"磁碟管理"

選完後可以在圖中"2"處看到所有磁碟的狀況，接著找到剛安裝的硬碟，並在該處按下右鍵選取"新增簡單磁碟區"，接著會有視窗選擇要分割多少容量，操作起來跟在 Windows 的安裝程式裡的那個差不多，割完後就可以直接使用，不需要重開機。

參考資料

[ ofeyhong.pixnet.net ] 【教學】在Windows系統中，如何硬碟分割？ (1槽分成2槽)

 在 JavaScript 的正規表達式取得比對結果的索引值

前言

  在之前的 在 JavaScript 初探正規表達式 簡單的使用正規表達式，但實際用後發現需要知道比對結果的索引值，做了個學習，在此做個紀錄。

內容

  範例如下

const reg = /ab*c/g;
let s = 'xxxabbc,xxxabc';
console.log( s.match(reg) );//["abbc", "abc"]
for( const match of s.matchAll(reg) ){
  console.log(match.index);
}

在上次的範例使用 string.match() 可以得到所以比對的結果，但有的時候會需要知道結果的索引值，所以要透過 string.matchAll() 來取得，這裡回傳的結果不再是 string ，而是一個類別，透果 index 來取得比對的結果的索引值。

參考資料

[ developer.mozilla.org ] String.prototype.matchAll()

相關文章與資料

在 JavaScript 初探正規表達式

 在 Python 初探正規表達式

前言

  在先前的 在 JavaScript 初探正規表達式 裡使用正規表達式，想了一下 Python 也是預設就支援正規表達式，所以就順便做個學習，在此做個紀錄。

內容

  範例如下

import re
str = 'xxxabbc,xxxabc'
failedStr = 'failed string'
regEx = re.compile( 'ab*c' )
print( regEx.search( str ).span() )#(3, 7)
#check is match?
res = regEx.search( failedStr )
if res is not None:
    print('Match')
else:
    print('Not match')
#
print( regEx.findall( str ) )#['abbc', 'abc']

要在 Python 使用正規表達式需要透過 re 模組，透過 re.compile() 可以做出像 JavaScript 的 RegExp 一樣的類別，但這次不需要在字尾加'g'，透過類別的 search() 可以取得比對的結果，但要注意回傳的是一個類別，利用回傳的類別的 span() 可以得到各個結果的起始位址，這裡有個不太直覺的地方， search() 在當沒有任何結果符合狀況時會回傳 None ，所以直接 search() 完喚起 span() 其實是有危險的!最後可以透過 findall() 來取得所有符合的結果，這裡回傳的就是陣列，就算沒有符合的結果也會回傳空陣列，可以安心使用。

參考資料

[ www.runoob.com ] Python 正则表达式

相關文章與資料

在 JavaScript 初探正規表達式

 在 JavaScript 初探正規表達式

前言

  雖然從很久以前就知道有正規表達式這樣的檢查字串手法，但因為我不常用到複雜的檢查字串規則，所以就一直能避就避的使用著它，最近剛好有空就用 JavaScript 來學習它，在此做個紀錄。

內容

  先看範例，如下

const reg = /ab*c/g;
let s = 'xxxabbc,xxxabc';
console.log( reg.test(s) );//true
console.log( s.match(reg) );//["abbc", "abc"]
console.log( s.replace(reg,'YYY') );//xxxYYY,xxxYYY

正規表達式用雙'/'來包住填入規則，但範例多了個'g'在字尾，這是'global search'的意思，待會會說明，範例的規則是a以後有0到多次的b，然後後有個c，這就是範例的規則，'ac'、'abc'、'abbc'...等都符合資格，接著可以透過 RegExp.test() 來檢查字串是否府合資格，RegExp 是 JavaScript 的正規表達式的類別，結果會回傳 true 或 false ，這個用法是最簡單的，接著第二個用法是透過 String.match()  來找到符合規則的字串，回傳的結果是個陣列，範例的結果有兩個，如果剛開始的規則裡沒有填寫字尾'g'的話，這裡的回傳結果就只會找一次，第三種用法是透過 String.replace() 來替代掉符合規則的文字，回傳的結果是一個字串，範例會將符合規則的字串都替換成'YYY'。

  這次初步的學習了正規表達式，正規表達式的填寫規則可以參考 [ developer.mozilla.org ] 正規表達式 裡面詳細的規則，除非很常使用正規表達式，不然應該很難把規則記下來，所以像我這種偶而用到的就用查的就可以了。

參考資料

[ developer.mozilla.org ] 正規表達式