บทความนี้ขอเรียกเป็นโน๊ตสั้นๆให้กับตัวเองแล้วกันเนาะ

จากข้อสงสัยของตัวเอง อะไรคือวิธีที่จะแปลงข้อความเป็นตัวเลขได้เร็วที่สุด และ ควรใช้มากที่สุด

ในภาษาจาวาสคริป ซึ่งตัวแปรทุกตัวจะประกาศด้วย var ทั้งนั้นถ้าเป็นภาษาอื่นก็จะมีระบุ int , char , String อะไรก็ว่าไป

แต่ Javascript จะทำยังไงละ หากเราต้องดึงข้อมูลที่เป็น Text มาใช้คำนวณ บางครั้งเราอาจเจอเหตุการณ์แบบนี้

var a=”2″;

var b=”4″;

a+b;   /// = 24 เฉยยย

ซึ่งในบางครั้งเราอาจไม่ได้ต้องการให้มันต่อ String กันสะหน่อย แค่ต้องการให้เลขมันบวกกัน

มันควรจะเป็น 6 สิคุณณณณณ

วันนี้ผมเลยขอนำเสนอวิธีการแปลงตัวแปรให้กลายเป็นตัวเลข

แต่เอ้ะ อะไรคือวิธีที่ดีที่สุดละ ในเมื่อมันมีตั้งหลายวิธี ตั้งแต่

1. Function ฟังก์ชั่น
2. Arithmetic Operator ตัวดำเนินการทางคณิตศาสตร์
3. Logical Operator ตัวดําเนินการทางตรรกะ
4. Bitwise Operators ตัวดำเนินการแบบบิต
5. Wrapper object 
6. Plus operator ใช้เครื่องหมายบวก

มาลองดูทีละหัวข้อกันนะครับ

Function ฟังก์ชั่น

คือ การใช้ฟังก์ชั่น parseInt ในการแปลงตัวแปรเป็นปกติให้เป็น Integer  โดยมีตัวอย่างการแปลงเลข 5 ดังนี้
parseInt("5", 10);

แต่ parseInt มีความพิเศษอยู่ ในกรณีที่ใส่ Parameter  มีตัวหนังสือผสมด้วย ถ้าใช้ parseInt

สิ่งที่เก็บจริงๆจะเป็นค่าตัวเลขเท่านั้น

Arithmetic Operator ตัวดำเนินการทางคณิตศาสตร์

คือการเอา ตัวเลข * 1

var a = "5" * 1;

Bitwise Operators ตัวดำเนินการแบบบิต

การใช้ >> (right shift) หรือ << (left shift)

"5" >> 0;
"5" << 0;
ทั้งสองตัวอย่างจะให้ผลลัพธ์เหมือนกัน เนื่องจากเป็นการระบุตัวเลขที่ต้องการเลื่อนบิตที่ 0 เหมือนกัน

หรืออาจจะเป็นการแปลงโดยการใช้เครื่องหมาย ~~ (Double bitwise NOT)

คือการสั่งให้ flip สองรอบ โดยในครั้งแรก ~2  = 1101 =  -3

พอ flip อีกครั้ง ~-3 = 0010 = 2  ฉะนั้น ~~2 == 2

var b = ~~ "5";

ตัว ~ ตัวเดียว (tilde) เรียกว่า bitwise NOT คือจะทำการกลับบิต จาก 0 เป็น 1 และจาก 1 เป็น 0 ในทุกๆบิต ซึ่งเป็น operator ที่จะใช้กับ int เท่านั้น ดังนั้นเวลามันเจอ string เช่น ~”5″ มันจะพยายามทำ type conversion ของ “5” ให้กลายเป็น int 5 ก่อน กลายเป็น ~5 ซึ่งถ้าดูฐานสองคือ ~0101 ก็จะถูก flip เป็น 1010 (1010 ฐานสอง หรือ -6 ฐานสิบ) แล้วมันก็เลยสั่ง flip อีกรอบให้กลับมาเป็น 0101 ( 0101 ฐานสอง หรือ 5 ฐานสิบ) ได้ค่าที่ต้องการ ดังนั้นวิธีการนี้คือการใช้ ~ เพื่อให้เกิด type conversion นั่นเอง (เพียงแต่เกิด side effect ทำให้ bit flipped เลยต้องสั่ง ~ ซ้ำอีกรอบให้ได้ค่าเดิม)

Wrapper object 

คือการใช้ Wrapper ของ Number ผ่านทาง Constructor

var d = Number("5");

Plus operator ใช้เครื่องหมายบวก

คือการใช้เครื่องหมายบวกในการกำหนดค่าให้กับตัวแปร
var e =+ "5";

หลังจากเราดูวิธีการใช้แต่ละแบบไปแล้ว แต่แบบไหนละที่เร็วที่สุด

https://jsperf.com/number-vs-parseint-vs-plus/3

จากข้อมูลการทดสอบ จะเห็นได้ว่าการใช้วิธี Logical Operator หรือใช้ var c= ~~"10";  อาจจะเป็นวิธีที่เร็วที่สุด

และเมื่อเทียบกับการใช้ Function parseInt หรือ Wrapper Number ที่หลายคนนิยมใช้

แต่จากผลการทดสอบถือว่าเป็นวิธีที่ให้ผลลัพธ์ได้ช้าที่สุด

แต่เดียวก่อน ~~ อาจไม่ใช่วิธีที่ดีที่สุดจากการทดสอบ firefox อาจจะทำงานกับ parseInt ได้ดีกว่า

แต่ทั้งนี้ทั้งนั้น การเขียน Code ไม่ใช่แค่เรื่องผลลัพธ์หรือความเร็วในการทำงานเพียงอย่างเดียว

แต่เราควรจะคำนึงถึงนักพัฒนาท่านอื่นๆที่จะมาแก้ไขหรือมาทำงานต่อจากโค้ดที่เราเขียนครับ

อ่านเพิ่มเติม

The Number JavaScript object

Number() vs parseInt() vs plus vs bitwise

 ขอบคุณพี่ปิง Supasate Choochaisri

ผิดพลาดประการใดกราบขออภัย

ขอบคุณครับ

Ima8. 07/04/58