ทำไม Array.map(Number) จึงแปลงช่องว่างเป็นศูนย์ใน JavaScript

สมมติว่าเรามีโค้ดและผลลัพธ์ดังต่อไปนี้ และเราต้องการทราบว่า JavaScript แปลงสตริงว่าง (" ") เป็น 0 ได้อย่างไร

const digify = (str) => {
  const parsedStr = [...str].map(Number);
  return parsedStr;
}
console.log(digify("778 858 7577"));

ผลลัพธ์

[ 7, 7, 8, 0, 8, 5, 8, 0, 7, 5, 7, 7 ]

พฤติกรรมนี้อาจก่อให้เกิดปัญหาโดยเฉพาะเมื่อสตริงมีตัวเลข 0 อยู่แล้ว

สิ่งนี้เกิดขึ้นเพราะภายในฟังก์ชัน map() เมื่อเราแปลงแต่ละตัวอักษรเป็นตัวเลขโดยใช้ Number ฟังก์ชันนี้จะใช้การเปรียบเทียบแบบนามธรรม (Abstract Equality Comparison ==) แทนการเปรียบเทียบแบบเข้มงวด (Strict Equality Comparison ===) ตามกฎนี้ ' ' == 0 จะให้ค่า true ทำให้ช่องว่างแต่ละช่องถูกแปลงเป็น 0

เพื่อป้องกันพฤติกรรมนี้ เราสามารถปรับแก้ฟังก์ชัน map() ได้ดังนี้

ตัวอย่าง

const sin = (str) => {
  const parsedStr = [...str].map(i => parseInt(i, 10));
  return parsedStr;
}
console.log(sin("778 858 7577"));

ด้วยวิธีนี้ เมื่อเจอช่องว่าง จะถูกแปลงเป็น NaN ซึ่งเป็นพฤติกรรมที่สมเหตุสมผลกว่า

ผลลัพธ์

[ 7, 7, 8, NaN, 8, 5, 8, NaN, 7, 5, 7, 7 ]