บทนี้กล่าวถึงอ็อบเจกต์พื้นฐานในแกนหลักของจาวาสคริปต์ คือ Array
, Boolean
, Date
, Function
, Math
, Number
, RegExp
, และ String
อ็อบเจกต์อาร์เรย์
จาวาสคริปต์ไม่มีชนิดข้อมูลที่เป็นอาร์เรย์โดยตรง อย่างไรก็ตาม คุณสามารถใช้อ็อบเจกต์อาร์เรย์ (Array
) และเมธอดของมันทำงานกับข้อมูลแบบอาร์เรย์ในแอปพลิเคชันของคุณได้ โดยอ็อบเจกต์อาร์เรย์มีเมธอดที่ใช้จัดการอาร์เรย์หลายแบบ เช่น เชื่อมต่ออาร์เรย์, กลับลำดับอาร์เรย์, และจัดเรียงข้อมูลในอาร์เรย์ และยังมีคุณสมบัติที่ใช้หาความยาวของอาร์เรย์และคุณสมบัติอื่นๆที่เกี่ยวข้องกับ regular expression ด้วย
อาร์เรย์คือชุดลำดับของค่าข้อมูล ที่คุณอ้างถึงด้วยชื่อและเลขลำดับ ตัวอย่างเช่น, คุณมีอาร์เรย์ชื่อ emp
ที่เก็บรายชื่อพนักงาน เรียงตามหมายเลขพนักงาน นั่นคือ emp[1]
คือพนักงานหมายเลขหนึ่ง, emp[2] คือพนักงานหมายเลขสอง, และเป็นเช่นนี้ต่อไป
การสร้างอาร์เรย์
ทุกคำสั่งต่อไปนี้สร้างอาร์เรย์ที่เหมือนกัน:
var arr = new Array(element0, element1, ..., elementN); var arr = Array(element0, element1, ..., elementN); var arr = [element0, element1, ..., elementN];
element0, element1, ..., elementN
คือรายการค่าข้อมูลที่จะกำหนดให้กับสมาชิกในอาร์เรย์ โดยเมื่อมีการกำหนดค่าข้อมูลเหล่านี้แล้ว, อาร์เรย์จะถูกสร้างขึ้นโดยที่สมาชิกของอาร์เรย์จะมีค่าตามข้อมูลที่กำหนด และมีความยาวเท่ากับจำนวนค่าข้อมูล
รูปแบบที่สาม ใช้วงเล็บเหลี่ยมที่เรียกว่า "ค่าข้อมูลอาร์เรย์" หรือ "ตัวสร้างอาร์เรย์" ซึ่งวิธีนี้จะสั้นกว่าการสร้างอาร์เรย์แบบอื่นๆ และเป็นที่นิยมใช้กัน โดยดูรายละเอียดได้ที่ Array Literals
การสร้างอาร์เรย์ที่มีความยาวมากกว่าศูนย์ แต่ไม่มีสมาชิกเลย มีวิธีทำได้แบบใดแบบหนึ่งตามตัวอย่างต่อไปนี้:
var arr = new Array(arrayLength); var arr = Array(arrayLength); // This has exactly the same effect var arr = []; arr.length = arrayLength;
หมายเหตุ: ในโค้ดข้างบน arrayLength
ต้องเป็นตัวเลขเท่านั้น ไม่เช่นนั้นแล้วอาร์เรย์จะถูกสร้างขึ้นโดยมีสมาชิกหนึ่งตัว (มีค่าเท่ากับ arrayLength
) ซึ่งการเรียกใช้ arr.legth
จะได้ค่าเป็น arrayLength
โดยตัวอาร์เรย์จริงๆแล้วจะมีแต่สมาชิกว่าง (ไม่ถูกกำหนดค่า) อยู่ข้างใน ซึ่งเมื่อใช้คำสั่งลูป for...in
กับอาร์เรย์นี้ จะไม่ได้สมาชิกของอาร์เรย์ในลูปเลย
นอกจากการสร้างเป็นตัวแปรใหม่แล้ว อาร์เรย์ยังถูกกำหนดให้เป็นค่าคุณสมบัติของอ็อบเจกต์ใหม่ หรืออ็อบเจกต์เดิมได้:
var obj = {}; // ... obj.prop = [element0, element1, ..., elementN]; // OR var obj = {prop: [element0, element1, ...., elementN]}
ถ้าคุณต้องการสร้างอาร์เรย์ที่มีสมาชิกตัวเดียว และสมาชิกนั้นมีค่าเป็นตัวเลข คุณต้องใช้วิธีการสร้างอาร์เรย์ในรูปแบบวงเล็บเหลี่ยมเท่านั้น เพราะถ้าเราสร้างอาร์เรย์โดยส่งค่าตัวเลขให้ฟังก์ชัน Array()
, มันจะแปลความหมายเป็นความยาวของอาร์เรย์เสมอ ซึ่งไม่ใช่การกำหนดค่าให้สมาชิกตัวเดียวในอาร์เรย์ตามที่เราต้องการ
var arr = [42];
var arr = Array(42); // Creates an array with no element, but with arr.length set to 42
// The above code is equivalent to
var arr = [];
arr.length = 42;
การเรียกฟังก์ชัน Array(N)
จะได้ค่า RangeError
, ถ้า N
เป็นตัวเลขที่มีทศนิยมมากกว่าศูนย์ ซึ่งแสดงในตัวอย่างต่อไปนี้
var arr = Array(9.3); // RangeError: Invalid array length
ถ้าคุณจำเป็นต้องเขียนโค้ดเพื่อสร้างอาร์เรย์ที่มีสมาชิกตัวเดียว และมีค่าเป็นข้อมูลแบบใดก็ได้ มันจะปลอดภัยกว่าถ้าจะสร้างโดยใช้ ค่าข้อมูลอาร์เรย์ หรืออีกวิธีหนึ่งคือ สร้างอาร์เรย์ว่างขึ้นมาก่อน แล้วค่อยเพิ่มสมาชิกเข้าไปทีหลัง
การสร้างข้อมูลในอาร์เรย์
คุณสามารถสร้างข้อมูลในอาร์เรย์ โดยการกำหนดค่าให้สมาชิก ดังตัวอย่าง,
var emp = []; emp[0] = "Casey Jones"; emp[1] = "Phil Lesh"; emp[2] = "August West";
หมายเหตุ: ถ้าคุณใช้ค่าอื่นที่ไม่ใช่ตัวเลขกับตัวดำเนินการอาร์เรย์ (วงเล็บเหลี่ยม) ในโค้ดข้างบน, จะเป็นการเพิ่มคุณสมบัติให้กับอ็อบเจกต์ที่ทำหน้าที่เป็นอาร์เรย์ แทนการกำหนดค่าให้กับสมาชิกของอาร์เรย์
var arr = []; arr[3.4] = "Oranges"; console.log(arr.length); // 0 console.log(arr.hasOwnProperty(3.4)); // true
คุณสามารถกำหนดค่าให้สมาชิกของอาร์เรย์ ในตอนที่สร้างมันได้:
var myArray = new Array("Hello", myVar, 3.14159); var myArray = ["Mango", "Apple", "Orange"]
การอ้างถึงสมาชิกของอาร์เรย์
คุณสามารถอ้างถึงสมาชิกของอาร์เรย์โดยใช้ลำดับที่ของสมาชิก ตัวอย่าง, สมมุติว่าคุณได้สร้างอาร์เรย์ต่อไปนี้:
var myArray = ["Wind", "Rain", "Fire"];
จากนั้นคุณก็อ้างถึงสมาชิกตัวแรกด้วย myArray[0]
และสมาชิกตัวที่สองด้วย myArray[1]
โดยลำดับของสมาชิกในอาร์เรย์จะเริ่มจากศูนย์
หมายเหตุ: ตัวดำเนินการอาร์เรย์ (วงเล็บเหลี่ยม) ถูกใช้เพื่อเข้าถึงคุณสมบัติของอาร์เรย์ได้ด้วย (อาร์เรย์ก็คืออ็อบเจ็กต์ชนิดหนึ่งในจาวาสคริปต์) ตัวอย่างเช่น,
var arr = ["one", "two", "three"]; arr[2]; // three arr["length"]; // 3
ทำความเข้าใจคุณสมบัติ length
การทำงานภายในของจาวาสคริปต์นั้น อาร์เรย์จะจัดเก็บสมาชิกของมันในรูปแบบคุณสมบัติของอ็อบเจกต์ และใช้ลำดับที่ของสมาชิกเป็นชื่อคุณสมบัติ โดยคุณสมบัติ length
มีความพิเศษคือ มันจะคืนลำดับที่ของสมาชิกตัวสุดท้ายเสมอ และต้องจำไว้ว่า ลำดับที่ของอาร์เรย์เริ่มจาก 0, ไม่ใช่ 1 นั่นหมายถึงว่าคุณสมบัติ length
จะมีค่ามากกว่าลำดับที่สูงสุดของอาร์เรย์อยู่หนึ่ง
var cats = []; cats[30] = ['Dusty']; print(cats.length); // 31
คุณสามารถที่จะกำหนดค่าให้คุณสมบัติ length ได้ โดยถ้ากำหนดค่าที่น้อยกว่าจำนวนสมาชิกจริง จะเป็นการตัดสมาชิกที่เกินออกไป และถ้ากำหนดค่าเป็น 0 จะทำให้กลายเป็นอาร์เรย์ว่าง:
var cats = ['Dusty', 'Misty', 'Twiggy']; console.log(cats.length); // 3 cats.length = 2; console.log(cats); // prints "Dusty,Misty" - Twiggy has been removed cats.length = 0; console.log(cats); // prints nothing; the cats array is empty cats.length = 3; console.log(cats); // [undefined, undefined, undefined]
การวนซ้ำในอาร์เรย์
การทำงานที่ใช้กันเสมอ คือการวนซ้ำด้วยค่าของอาร์เรย์ และทำงานบางอย่างกับค่านั้น ซึ่งวิธีที่ง่ายที่สุดคือ:
var colors = ['red', 'green', 'blue']; for (var i = 0; i < colors.length; i++) { console.log(colors[i]); }
ถ้าคุณรู้ว่า ไม่มีสมาชิกตัวใดในอาร์เรย์ที่สามารถหาค่าได้เป็น false
เลย — และถ้าอาร์เรย์ของคุณประกอบด้วยโหนดของ DOM เท่านั้น, ตัวอย่างนี้ คุณสามารถใช้วิธีการวนซ้ำที่ดีกว่าเดิมได้:
var divs = document.getElementsByTagName('div'); for (var i = 0, div; div = divs[i]; i++) { /* Process div in some way */ }
วิธีนี้จะลดขั้นตอนการหาความยาวของอาร์เรย์ และปรับค่าตัวแปร div
ตามค่าลำดับทุกรอบการทำงาน เพื่อเพิ่มความสะดวกในการใช้งาน
Introduced in JavaScript 1.6
เมธอด forEach()
ของอาร์เรย์ ที่ถูกเพิ่มเข้ามาในจาวาสคริปต์ 1.6 คืออีกวิธีที่ทำให้มีการวนซ้ำในอาร์เรย์:
var colors = ['red', 'green', 'blue']; colors.forEach(function(color) { console.log(color); });
โดยฟังก์ชันที่ส่งเข้า forEach
จะถูกเรียกให้ทำงานทีละครั้ง กับทุกสมาชิกในอาร์เรย์ ที่ถูกส่งเป็นตัวแปร (color
) เข้าฟังก์ชัน โดยสมาชิกที่ไม่ถูกกำหนดค่าจะไม่ถูกวนซ้ำในลูป forEach
ในการวนซ้ำด้วยคำสั่ง forEach
นั้น
, ให้สังเกตุว่า จะข้ามสมาชิกบางตัวของอาร์เรย์ไป เนื่องจากสมาชิกนั้นไม่ถูกกำหนดค่า แต่จะไม่ข้ามสมาชิกที่ถูกกำหนดค่าเป็น undefined
:
var array = ['first', 'second', , 'fourth']; // returns ['first', 'second', 'fourth']; array.forEach(function(element) { console.log(element); }) if(array[2] === undefined) { console.log('array[2] is undefined'); } // true var array = ['first', 'second', undefined, 'fourth']; // returns ['first', 'second', undefined, 'fourth']; array.forEach(function(element) { console.log(element); })
เนื่องจากสมาชิกของอาร์เรย์ถูกจัดเก็บแบบเดียวกับคุณสมบัติของอ็อบเจกต์ จึงไม่แนะนำให้ทำการวนซ้ำอาร์เรย์ในจาวาสคริปต์ด้วยลูป for...in เพราะจะมีทั้งสมาชิของอาร์เรย์และคุณสมบัติทั้งหมดรวมอยู่ด้วย
เมธอดของอาร์เรย์
อ็อบเจกต์อาร์เรย์ (Array
) มีเมธอดให้ใช้ต่อไปนี้:
concat()
รวมสองอาร์เรย์เข้าด้วยกัน และคืนค่าอาร์เรย์ใหม่var myArray = new Array("1", "2", "3"); myArray = myArray.concat("a", "b", "c"); // myArray is now ["1", "2", "3", "a", "b", "c"]
join(deliminator = ",")
รวมสมาชิกทุกตัวในอาร์เรย์ให้เป็นสตริงvar myArray = new Array("Wind", "Rain", "Fire"); var list = myArray.join(" - "); // list is "Wind - Rain - Fire"
push()
เพิ่มสมาชิกใหม่ตัวเดียวหรือมากกว่าที่ท้ายอาร์เรย์ และคืนค่าความยาวใหม่ของอาร์เรย์var myArray = new Array("1", "2"); myArray.push("3"); // myArray is now ["1", "2", "3"]
pop()
ลบสมาชิกตัวสุดท้ายออกจากอาร์เรย์ และคืนค่าสมาชิกนั้นvar myArray = new Array("1", "2", "3"); var last = myArray.pop(); // myArray is now ["1", "2"], last = "3"
shift()
ลบสมาชิกตัวแรกออกจากอาร์เรย์ และคืนค่าสมาชิกนั้นvar myArray = new Array ("1", "2", "3"); var first = myArray.shift(); // myArray is now ["2", "3"], first is "1"
unshift()
เพิ่มสมาชิกใหม่ตัวเดียวหรือมากกว่าที่หัวอาร์เรย์ และคืนค่าความยาวใหม่ของอาร์เรย์var myArray = new Array ("1", "2", "3"); myArray.unshift("4", "5"); // myArray becomes ["4", "5", "1", "2", "3"]
slice(start_index, upto_index)
ตัดอาร์เรย์ออกตามส่วนที่กำหนด และคืนอาร์เรย์ใหม่var myArray = new Array ("a", "b", "c", "d", "e"); myArray = myArray.slice(1, 4); /* starts at index 1 and extracts all elements until index 3, returning [ "b", "c", "d"] */
splice(index, count_to_remove, addelement1, addelement2, ...)
ลบสมาชิกออกจากอาร์เรย์ และเลือกที่จะแทนสมาชิกใหม่ลงไปได้
var myArray = new Array ("1", "2", "3", "4", "5"); myArray.splice(1, 3, "a", "b", "c", "d"); // myArray is now ["1", "a", "b", "c", "d", "5"] // This code started at index one (or where the "2" was), removed 3 elements there, // and then inserted all consecutive elements in its place.
reverse()
กลับลำดับสมาชิกในอาร์เรย์ ตัวแรกเป็นตัวสุดท้าย ตัวสุดท้ายเป็นตัวแรกvar myArray = new Array ("1", "2", "3"); myArray.reverse(); // transposes the array so that myArray = [ "3", "2", "1" ]
sort()
จัดเรียงลำดับสมาชิกในอาร์เรย์var myArray = new Array("Wind", "Rain", "Fire"); myArray.sort(); // sorts the array so that myArrray = [ "Fire", "Rain", "Wind" ]
sort()
สามารถรับฟังก์ชัน callback ที่ทำการเปรียบเทียบค่าสมาชิกของอาร์เรย์ได้ โดยฟังก์ชันนี้จะเปรียบเทียบค่าสองค่า และคืนค่าหนึ่งจากสามค่าต่อไปนี้:- ถ้า a น้อยกว่า b ตามระบบการจัดเรียงข้อมูล ให้คืนค่า -1 (หรือค่าลบใดๆ)
- ถ้า a มากกว่า b ตามระบบการจัดเรียงข้อมูล ให้คืนค่า 1 (หรือค่าบวกใดๆ)
- ถ้า a และ b มีค่าเท่ากัน ให้คืนค่า 0
ตัวอย่างต่อไปนี้ ทำการจัดเรียงตามอักษรตัวสุดท้ายของอาร์เรย์:
var sortFn = function(a, b){ if (a[a.length - 1] < b[b.length - 1]) return -1; if (a[a.length - 1] > b[b.length - 1]) return 1; if (a[a.length - 1] == b[b.length - 1]) return 0; } myArray.sort(sortFn); // sorts the array so that myArray = ["Wind","Fire","Rain"]
Introduced in JavaScript 1.6
โค้ดที่เข้ากันได้กับเบราว์เซอร์รุ่นเก่า ดูได้ที่หน้าฟังก์ชันนั้น ส่วนเบราว์เซอร์ที่รองรับความสามารถเหล่านี้ได้โดยตรงดูได้ ที่นี่
indexOf(searchElement[, fromIndex])
ค้นหาค่าsearchElement
ในอาร์เรย์ และคืนค่าลำดับที่ของตัวแรกที่พบvar a = ['a', 'b', 'a', 'b', 'a']; alert(a.indexOf('b')); // Alerts 1 // Now try again, starting from after the last match alert(a.indexOf('b', 2)); // Alerts 3 alert(a.indexOf('z')); // Alerts -1, because 'z' was not found
lastIndexOf(searchElement[, fromIndex])
ทำงานเหมือนindexOf
แต่เริ่มค้นหาจากด้านท้าย และค้นย้อนกลับไปvar a = ['a', 'b', 'c', 'd', 'a', 'b']; alert(a.lastIndexOf('b')); // Alerts 5 // Now try again, starting from before the last match alert(a.lastIndexOf('b', 4)); // Alerts 1 alert(a.lastIndexOf('z')); // Alerts -1
forEach(callback[, thisObject])
เรียกใช้ฟังก์ชันcallback
กับทุกสมาชิกในอาร์เรย์var a = ['a', 'b', 'c']; a.forEach(alert); // Alerts each item in turn
map(callback[, thisObject])
คืนค่าอาร์เรย์ใหม่ที่ได้จากค่าที่เกิดจากการทำงานของฟังก์ชันcallback
กับทุกสมาชิกในอาร์เรย์var a1 = ['a', 'b', 'c']; var a2 = a1.map(function(item) { return item.toUpperCase(); }); alert(a2); // Alerts A,B,C
filter(callback[, thisObject])
คืนค่าอาร์เรย์ใหม่ที่ประกอบด้วยสมาชิกที่ฟังก์ชันcallback
คืนค่าtrue
var a1 = ['a', 10, 'b', 20, 'c', 30]; var a2 = a1.filter(function(item) { return typeof item == 'number'; }); alert(a2); // Alerts 10,20,30
every(callback[, thisObject])
คืนค่าtrue
ถ้าฟังก์ชันcallback
คืนค่าtrue
กับทุกสมาชิกในอาร์เรย์function isNumber(value){ return typeof value == 'number'; } var a1 = [1, 2, 3]; alert(a1.every(isNumber)); // Alerts true var a2 = [1, '2', 3]; alert(a2.every(isNumber)); // Alerts false
some(callback[, thisObject])
คืนค่าtrue
ถ้าฟังก์ชันcallback
คืนค่าtrue
ให้กับสมาชิกอย่างน้อยหนึ่งตัวในอาร์เรย์function isNumber(value){ return typeof value == 'number'; } var a1 = [1, 2, 3]; alert(a1.some(isNumber)); // Alerts true var a2 = [1, '2', 3]; alert(a2.some(isNumber)); // Alerts true var a3 = ['1', '2', '3']; alert(a3.some(isNumber)); // Alerts false
เมธอดข้างบนที่รับฟังก์ชัน callback
เรียกว่า เมธอดแบบวนซ้ำ (iterative method) เพราะว่ามันจะทำการวนซ้ำกับค่าในอาร์เรย์และทำงานบางอย่าง โดยสามารถที่จะเลือกรับค่าตัวแปรเข้าเมธอดตัวที่สองคือ thisObject
ได้ ซึ่งถ้ามีการกำหนดตัวแปรนี้, thisObject
จะกลายเป็นค่าของ this
ภายในฟังก์ชัน callback
แต่ถ้าไม่มีการกำหนด, ก็จะเหมือนกับกรณีอื่นที่มีการเรียกใช้ฟังก์ชันนอกขอบเขตที่สร้างมันขึ้นมา ซึ่ง this
จะอ้างถึงอ็อบเจกต์ส่วนกลาง (window
)
ฟังก์ชัน callback
จริงๆแล้วจะถูกเรียกใช้ด้วยค่าสามค่า ซึ่งตัวแรกคือค่าของสมาชิกในรอบนั้น, ตัวที่สองคือลำดับของสมาชิกในอาร์เรย์, และตัวที่สามคือตัวอาร์เรย์เอง โดยจาวาสคริปต์จะไม่สนใจค่าที่ไม่ได้ส่งเข้าฟังก์ชัน ดังนั้นจึงไม่มีปัญหาอะไรถ้าฟังก์ชัน callback
จะรับแค่ค่าเดียว เช่นใน alert
Introduced in JavaScript 1.8
reduce(callback[, initialValue])
ใช้กับฟังก์ชันcallback(firstValue, secondValue)
เพิ่อแปลงค่าจากอาร์เรย์ให้เหลือค่าเดียวvar a = [10, 20, 30]; var total = a.reduce(function(first, second) { return first + second; }, 0); alert(total) // Alerts 60
reduceRight(callback[, initialValue])
ทำงานเหมือนreduce()
แต่เริ่มจากสมาชิกตัวสุดท้าย
reduce
และ reduceRight
พบได้น้อยในการทำงานแบบวนซ้ำกับอาร์เรย์ โดยมักจะใช้ในโปรแกรมที่ทำการรวมข้อมูลที่เรียงเป็นชุดให้เป็นข้อมูลค่าเดียว
อาร์เรย์หลายมิติ
อาร์เรย์สามารถซ้อนกันได้ ความหมายคืออาร์เรย์หนึ่งตัวสามารถมีอาร์เรย์อีกตัวเป็นสมาชิกได้ ด้วยคุณลักษณะนี้ของอาร์เรย์ในจาวาสคริปต์ ทำให้สามารถสร้างอาร์เรย์แบบหลายมิติได้
โค้ดต่อไปนี้สร้างอาร์เรย์แบบสองมิติ
var a = new Array(4); for (i = 0; i < 4; i++) { a[i] = new Array(4); for (j = 0; j < 4; j++) { a[i][j] = "[" + i + "," + j + "]"; } }
จากตัวอย่าง จะได้อาร์เรย์ที่มีข้อมูลในแต่ละแถวเป็นดังนี้:
Row 0: [0,0] [0,1] [0,2] [0,3] Row 1: [1,0] [1,1] [1,2] [1,3] Row 2: [2,0] [2,1] [2,2] [2,3] Row 3: [3,0] [3,1] [3,2] [3,3]
อาร์เรย์และ Regular Expression
เมื่อผลลัพธ์ของการค้นหาค่าในสตริงด้วย regular expression เป็นค่าอาร์เรย์ อาร์เรย์นั้นจะมีคุณสมบัติและสมาชิกที่มีข้อมูลเกี่ยวข้องกับการค้นหานั้น โดยเราจะได้ผลลัพธ์ที่เป็นค่าอาร์เรย์จากเมธอด RegExp.exec()
, String.match()
, และ String.split()
ซึ่งสามารถดูวิธีการใช้อาร์เรย์กับ regular expression เพิ่มเติมได้ที่ Regular Expressions
การทำงานกับอ็อบเจกต์ที่ดูเหมือนอาร์เรย์
Introduced in JavaScript 1.6
มีอ็อบเจกต์จาวาสคริปต์บางตัว เช่น NodeList
ที่ได้จาก document.getElementsByTagName()
หรือ arguments
ที่ใช้งานได้ในฟังก์ชัน ที่ดูผิวเผินจะเหมือนอาร์เรย์ แต่ไม่มีเมธอดของอาร์เรย์ทั้งหมด เช่น อ็อบเจกต์ arguments
มีคุณสมบัติ length
แต่ไม่มีเมธอด forEach()
คำสั่งจัดการแบบอาร์เรย์ ที่เริ่มมีใช้ในจาวาสคริปต์ 1.6 ช่วยให้เราใช้เมธอดของอ็อบเจกต์ Array
กับอ็อบเจกต์ที่ดูเหมือนอาร์เรย์ได้ โดยแต่ละคำสั่งจะมีชื่อที่ตรงกันกับเมธอดของอ็อบเจกต์ Array
ตัวอย่างเช่น:
function alertArguments() { Array.forEach(arguments, function(item) { alert(item); }); }
ซึ่งคำสั่งจัดการแบบอาร์เรย์เหล่านี้ สามารถเขียนให้ชัดเจนเพื่อใช้ในจาวาสคริปต์เวอร์ชันเก่า โดยเรียกใช้เมธอด call ของอ็อบเจกต์ฟังก์ชัน:
Array.prototype.forEach.call(arguments, function(item) { alert(item); });
คำสั่งจัดการแบบอาร์เรย์ สามารถใช้กับสตริงได้ด้วย เนื่องจากมันช่วยให้เราเข้าถึงอักขระที่เรียงกันแต่ละตัวได้แบบเดียวกับอาร์เรย์
Array.forEach("a string", function(chr) { alert(chr); });
ตัวอย่างต่อไป เป็นวิธีการใช้คำสั่งจัดการแบบอาร์เรย์กับสตริง และยังใช้ประโยชน์จาก JavaScript 1.8 expression closures ด้วย:
var str = 'abcdef'; var consonantsOnlyStr = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf' var vowelsPresent = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true var allVowels = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false var interpolatedZeros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0' var numerologicalValue = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0); // 21 (reduce() since JS v1.8)
สังเกตุได้ว่า filter
และ map
ไม่ได้คืนค่าผลลัพธ์แบบสตริงที่มีอักขระเป็นสมาชิกอยู่ข้างใน แต่ได้ค่าเป็นอาร์เรย์แทน โดยเราต้องใช้เมธอด join
เพื่อแปลงให้กลับเป็นสตริง
การสร้างอาร์เรย์แบบ comprehension
Introduced in JavaScript 1.7
เริ่มมีใช้ในจาวาสคริปต์ 1.7, การสร้างอาร์เรย์แบบ comprehension นี้ช่วยให้เราสร้างอาร์เรย์ใหม่จากข้อมูลของอาร์เรย์อีกตัวได้ โดยบ่อยครั้งที่เราใช้แทนเมธอด map()
และ filter()
หรือใช้เมื่อต้องการทั้งสองอย่าง
การสร้างอาร์เรย์แบบ comprehension ต่อไปนี้ รับอาร์เรย์ของตัวเลขและสร้างอาร์เรย์ใหม่ที่มีค่าเป็นสองเท่าของค่าเดิม
var numbers = [1, 2, 3, 4]; var doubled = [i * 2 for (i of numbers)]; alert(doubled); // Alerts 2,4,6,8
ซึ่งได้ผลลัพธ์เทียบเท่ากับที่ได้จากเมธอด map()
ดังนี้:
var doubled = numbers.map(function(i){return i * 2;});
การสร้างอาร์เรย์แบบ comprehension ยังสามารถใช้เพื่อเลือกสมาชิกที่ตรงกับเงื่อนไขเฉพาะได้ เช่นตัวอย่างการสร้างอาร์เรย์ที่เลือกเฉพาะเลขคู่เท่านั้น:
var numbers = [1, 2, 3, 21, 22, 30]; var evens = [i for (i of numbers) if (i % 2 === 0)]; alert(evens); // Alerts 2,22,30
ซึ่งสามารถใช้ filter()
เพื่อวัตถุประสงค์เดียวกันนี้ได้:
var evens = numbers.filter(function(i){return i % 2 === 0;});
การใช้งาน map() และ filter() สามารถรวมเข้าด้วยกัน โดยใช้การสร้างอาร์เรย์แบบ comprehension ได้ในครั้งเดียว ตัวอย่างนี้ ทำการเลือกเฉพาะเลขคู่และสร้างอาร์เรย์ที่มีค่าเป็นสองเท่าของมัน:
var numbers = [1, 2, 3, 21, 22, 30]; var doubledEvens = [i * 2 for (i of numbers) if (i % 2 === 0)]; alert(doubledEvens); // Alerts 4,44,60
วงเล็บเหลี่ยมที่ใช้ในการสร้างอาร์เรย์แบบ comprehension ทำให้เกิดบล็อกแฝงขึ้นเพื่อจำกัดขอบเขตการทำงาน โดยตัวแปรใหม่ภายในบล็อกนี้ (เช่น i
ในตัวอย่าง) จะถูกดำเนินการเหมือนกับว่าถูกประกาศโดยใช้คำสั่ง let
ซึ่งหมายความได้ว่ามันไม่สามารถเรียกใช้ได้นอกบล็อกนี้
ข้อมูลเริ่มต้นที่ใช้สร้างอาร์เรย์แบบ comprehension นี้ ไม่จำเป็นต้องอาร์เรย์เสมอไป สามารถใช้ iterators and generators ได้
แม้กระทั่งสตริงก็สามารถใช้เป็นข้อมูลเริ่มต้นได้ ตัวอย่างต่อไปนี้ เป็นการรวมคำสั่ง filter และ map ของตัวอย่างข้างบน โดยใช้การสร้างอาร์เรย์แบบ comperhension กับสตริง:
var str = 'abcdef'; var consonantsOnlyStr = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c)) ].join(''); // 'bcdf' var interpolatedZeros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0'
ซึ่งจะได้ผลลัพธ์เป็นคนละแบบกับข้อมูลเริ่มต้น นั่นคือเราต้องใช้คำสั่ง join()
เพื่อแปลงอาร์เรย์ที่ได้ให้กลับเป็นสตริงอีกครั้ง
อ็อบเจกต์ Boolean
อ็อบเจกต์ Boolean คือตัวหุ้มค่าข้อมูลพื้นฐานตรรกะ โดยมีรูปแบบการสร้างอ็อบเจกต์ Boolean ดังนี้:
var booleanObjectName = new Boolean(value);
อย่าสับสนระหว่างค่าข้อมูลพื้นฐานตรรกะ true
และ false
กับค่าของอ็อบเจ็กต์ Boolean ซึ่งอ็อบเจกต์ใดก็ตามที่ไม่ใช่ undefined
, null
, 0
, NaN
หรือสตริงว่าง และรวมถึงอ็อบเจกต์ Boolean ที่มีค่าเป็น false, จะประมวลค่าได้ผลลัพธ์เป็น true
เมื่อใช้ในคำสั่งเงื่อนไข ดูข้อมูลเพิ่มเติมที่ if...else Statement
อ็อบเจกต์ Date
จาวาสคริปต์ไม่มีชนิดข้อมูลที่เป็นวันที่ อย่างไรก็ตาม คุณสามารถใช้อ็อบเจกต์ Date
และเมธอดของมันทำงานกับข้อมูลวันที่และเวลาในแอปพลิเคชันของคุณได้ โดยอ็อบเจกต์ Date
มีเมธอดให้ใช้จำนวนมากเพื่อกำหนดค่า, รับค่า, และจัดการค่าวันที่ แต่ไม่มีคุณสมบัติให้เรียกใช้
จาวาสคริปต์จัดการข้อมูลวันที่คล้ายกับจาวา โดยทั้งสองภาษามีเมธอดจัดการวันที่เหมือนกันหลายตัว และภาษาทั้งคู่จัดเก็บวันที่ เป็นจำนวนมิลลิวินาทีตั้งแต่วันที่ 1 มกราคม ค.ศ. 1970 เวลา 00:00:00
อ็อบเจกต์ Date
มีค่าอยู่ในช่วง -100,000,000 วัน ถึง 100,000,000 วัน นับจากวันที่ 1 มกราคม ค.ศ. 1970 ตามเวลามาตรฐาน (UTC)
การสร้างอ็อบเจกต์ Date
ทำได้ดังนี้:
var dateObjectName = new Date([parameters]);
เมื่อ dateObjectName
คือชื่อของอ็อบเจกต์ Date
ที่สร้างขึ้นใหม่ ซึ่งสามารถเป็นได้ทั้งอ็อบเจกต์ใหม่ หรือคุณสมบัติของอ็อบเจกต์ที่มีอยู่แล้วได้
การใช้คำสั่ง Date
ที่ไม่มี new
นำหน้า คือการแปลงวันที่ให้เป็นสตริง
โดยตัวแปร parameters
ที่ใช้ในคำสั่ง สามารถมีค่าได้ดังต่อไปนี้:
- ไม่กำหนด: จะสร้างวันที่และเวลาปัจจุบัน เช่น,
today = new Date();
- ค่าสตริงในรูปแบบต่อไปนี้: "เดือน วัน, ปี ชั่วโมง:นาที:วินาที" เช่น
var Xmas95 = new Date("December 25, 1995 13:30:00")
, ถ้าไม่ระบุค่า ชั่วโมง, นาที, หรือวินาที จะถูกกำหนดให้เป็นศูนย์ - ชุดตัวเลขจำนวนเต็มมีค่าเป็น ปี, เดือน, และวัน เช่น,
var Xmas95 = new Date(1995, 11, 25)
- ชุดตัวเลขจำนวนเต็มมีค่าเป็น ปี, เดือน, วัน, ชั่วโมง, นาที, และวินาที เช่น,
var Xmas95 = new Date(1995, 11, 25, 9, 30, 0)
ในจาวาสคริปต์ 1.2 และก่อนหน้า
อ็อบเจกต์ Date มีการทำงานดังนี้:
- ไม่รับวันที่ก่อนปี 1970
- การทำงานของจาวาสคริปต์จะขึ้นกับวิธีจัดการและใช้งานข้อมูลวันที่ของแต่ละระบบ นั่นคือการทำงานของอ็อบเจกต์
Date
มีความแตกต่างกันไปในแต่ละระบบ
เมธอดของอ็อบเจกต์ Date
เมธอดของอ็อบเจกต์ Date
ที่จัดการข้อมูลวันที่และเวลา แบ่งออกได้เป็นกลุ่มใหญ่ๆดังนี้:
- เมธอด set , ใช้กำหนดค่าข้อมูลวันที่และเวลาของอ็อบเจกต์
Date
- เมธอด get , ใช้ดึงค่าข้อมูลวันที่และเวลาจากอ็อบเจกต์
Date
- เมธอด to , ใช้คืนค่าสตริงจากอ็อบเจกต์ Date
- เมธอด parse และ UTC , ใช้แปลงค่าสตริงเป็นอ็อบเจกต์
Date
ด้วยเมธอด get และ set คุณสามารถกำหนดและดึงค่า วินาที, นาที, ชั่วโมง, วันในเดือน, วันในสัปดาห์, เดือน, และปี แยกจากกันได้ โดยมีเมธอด getDay
ที่คืนค่าวันในสัปดาห์ แต่ไม่มีเมธอด setDay
เพราะว่าวันในสัปดาห์ถูกกำหนดให้โดยอัตโนมัติ ซึ่งเมธอดเหล่านี้ใช้ตัวเลขจำนวนเต็มแทนค่าต่างๆดังนี้:
- วินาทีและนาที: 0 ถึง 59
- ชั่วโมง: 0 ถึง 23
- วัน: 0 (วันอาทิตย์) ถึง 6 (วันเสาร์)
- วันที่: 1 ถึง 31 (วันในเดือน)
- เดือน: 0 (มกราคม) ถึง 11 (ธันวาคม)
- ปี: จำนวนปีตั้งเต่ ค.ศ. 1900
ตัวอย่าง เช่น, สมมุติว่าคุณสร้างวันที่ต่อไปนี้:
var Xmas95 = new Date("December 25, 1995");
เมื่อเรียก Xmas95.getMonth()
จะได้ค่า 11
, และ Xmas95.getFullYear()
จะได้ 1995
เมธอด getTime
และ setTime
ใช้ประโยชน์ในการเปรียบเทียบวันที่ โดยเมธอด getTime จะคืนค่าจำนวนมิลลิวินาทีตั้งแต่วันที่ 1 มกราคม ค.ศ. 1970 เวลา 00:00:00 จากอ็อบเจกต์ Date
ตัวอย่างต่อไปนี้แสดงจำนวนวันที่เหลือในปีปัจจุบัน:
var today = new Date(); var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month endYear.setFullYear(today.getFullYear()); // Set year to this year var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; var daysLeft = Math.round(daysLeft); //returns days left in the year
ตัวอย่างนี้สร้างอ็อบเจกต์ Date
ชื่อ today
ซึ่งเก็บวันที่ปัจจุบัน และสร้างอ็อบเจกต์ Date
ชื่อ endYear
แล้วตั้งค่าปีเป็นปีปัจจุบัน จากนั้นใช้จำนวนมิลลิวินาทีในหนึ่งวันคำนวณค่าจำนวนวันระหว่าง today
กับ endYear
ด้วย getTime
และปัดให้เป็นจำนวนเต็มวัน
เมธอด parse
ใช้ประโยชน์ในการกำหนดค่าจากสตริงให้กับอ็อบเจกต์ Date
ที่มีอยู่แล้ว เช่นในตัวอย่างต่อไปนี้, ใช้ parse
และ setTime
เพื่อกำหนดค่าวันที่ให้อ็อบเจกต์ IPOdate
:
var IPOdate = new Date(); IPOdate.setTime(Date.parse("Aug 9, 1995"));
ตัวอย่างการใช้อ็อบเจกต์ Date
ในตัวอย่างต่อไปนี้, ฟังก์ชัน JSClock()
จะคืนค่าเวลาในรูปแบบนาฬิกาดิจิตอล
function JSClock() { var time = new Date(); var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeconds(); var temp = "" + ((hour > 12) ? hour - 12 : hour); if (hour == 0) temp = "12"; temp += ((minute < 10) ? ":0" : ":") + minute; temp += ((second < 10) ? ":0" : ":") + second; temp += (hour >= 12) ? " P.M." : " A.M."; return temp; }
ในตอนแรก ฟังก์ชัน JSClock
จะสร้างอ็อบเจกต์ Date
ขึ้นใหม่ชื่อ time
โดยไม่กำหนดค่าใดๆ ซึ่งทำให้ time
มีค่าเริ่มต้นเป็นวันที่และเวลาปัจจุบัน จากนั้นจะเรียกเมธอด getHours
, getMinutes
, และ getSeconds
เพื่อกำหนดค่าเวลาปัจจุบันให้ตัวแปร hour
, minute
, และ second
สี่คำสั่งถัดมาจะสร้างค่าสตริงจากเวลาที่ได้ โดยคำสั่งแรกจะสร้างตัวแปร temp
และกำหนดค่าด้วยนิพจน์เงื่อนไข ถ้า hour
มากกว่า 12 ให้ใช้ค่า (hour - 12)
, นอกนั้นให้ใช้ค่า hour
, ถ้า hour
เป็น 0 ให้ใช้ค่า 12
คำสั่งถัดมาจะเพิ่มค่า minute
ไปที่ temp
โดยถ้าค่าของ minute
น้อยกว่า 10, นิพจน์เงื่อนไขจะเพิ่มศูนย์ไปข้างหน้าสตริง นอกนั้นจะเพิ่ม colon เข้าไปหน้าสตริง จากนั้นคำสั่งต่อมาก็จะเพิ่มค่า seconds
ไปที่ temp
ด้วยวิธีเดียวกัน
ท้ายสุด, นิพจน์เงื่อนไขจะเพิ่ม "PM" ไปที่ temp
ถ้า hour
เท่ากับหรือน้อยกว่า 12, นอกจากนั้น มันจะเพิ่ม "AM" ไปที่ temp
อ็อบเจกต์ Function
อ็อบเจกต์พื้นฐาน Function
นำสตริงที่มีโค้ดจาวาสคริปต์ มาแปลให้เป็นฟังก์ชัน
โดยมีวิธีสร้างอ็อบเจกต์ Function
ดังนี้:
var functionObjectName = new Function ([arg1, arg2, ... argn], functionBody);
functionObjectName
คือชื่อของตัวแปร หรือคุณสมบัติของอ็อบเจกต์ที่มึอยู่แล้ว โดยสามารถใช้ชื่ออ็อบเจกต์ตามด้วยชื่อตัวจัดการเหตุการณ์แบบอักษรตัวเล็กได้ เช่น window.onerror
arg1
, arg2
, ... argn
เป็นค่าข้อมูลที่ฟังก์ชันใช้โดยระบุชื่อแต่ละตัวด้วยสตริง ที่มีรูปแบบถูกต้องตามชื่อตัวแปรของจาวาสคริปต์ เช่น "x" หรือ "theForm"
functionBody
คือสตริงที่มีโค้ดจาวาสคริปต์ ที่ต้องการแปลให้เป็นตัวฟังก์ชัน
อ็อบเจกต์ Function
จะถูกประมวลค่าทุกครั้งที่มันถูกเรียกใช้ ทำให้มีประสิทธิภาพน้อยกว่าการประกาศฟังก์ชันและเรียกใช้ในโค้ด เพราะว่าฟังก์ชันที่ประกาศไว้จะถูกแปลก่อนการใช้งาน
นอกจากการสร้างฟังก์ชันตามแบบที่อธิบายนี้แล้ว, คุณยังสามารถใช้ function
statement และ นิพจน์ฟังก์ชันได้ โดยดูข้อมูลเพิ่มเติมได้ที่ JavaScript Reference
โค้ดต่อไปนี้จะกำหนดค่าฟังก์ชันให้กับตัวแปร setBGColor
โดยฟังก์ชันนี้จะทำการตั้งค่าสีพื้นของเอกสาร
var setBGColor = new Function("document.bgColor = 'antiquewhite'");
ในการเรียกใช้อ็อบเจกต์ Function
คุุณใช้ชื่อตัวแปรเหมือนว่าเป็นฟังก์ชัน โดยโค้ดต่อไปนี้เรียกใช้งานฟังก์ชันจากตัวแปร setBGColor
:
var colorChoice="antiquewhite"; if (colorChoice=="antiquewhite") {setBGColor()}
คุณสามารถกำหนดค่าฟังก์ชันให้กับตัวจัดการเหตุการณ์ ได้จากสองวิธีต่อไปนี้:
-
document.form1.colorButton.onclick = setBGColor;
-
<INPUT NAME="colorButton" TYPE="button" VALUE="Change background color" onClick="setBGColor()">
การสร้างตัวแปร setBGColor
ที่แสดงข้างบนจะคล้ายกับการประกาศฟังก์ชันต่อไปนี้:
function setBGColor() { document.bgColor = 'antiquewhite'; }
การกำหนดค่าฟังก์ชันให้กับตัวแปรจะคล้ายกับการประกาศฟังก์ชัน แต่แตกต่างกันที่:
- เมื่อคุณกำหนดค่าฟังก์ชันให้ตัวแปรด้วย
var setBGColor = new Function("...")
, ตัวแปรsetBGColor
จะมีค่าอ้างอิงไปที่ฟังก์ชันที่ถูกสร้างด้วยnew Function()
- เมื่อคุณสร้างฟังก์ชันด้วย
function setBGColor() {...},
setBGColor
จะไม่ใช่ตัวแปร แต่เป็นชื่อของฟังก์ชัน
คุณสามารถซ้อนฟังก์ชันในฟังก์ชันได้ ซึ่งฟังก์ชันที่ถูกซ้อน (ตัวใน) จะมองเห็นได้จากฟังก์ชันที่หุ้มมันอยู่ (ตัวนอก) เท่านั้น โดยที่:
- ฟังก์ชันตัวในจะถูกเข้าถึงได้เฉพาะจากคำสั่งของฟังก์ชันตัวนอกเท่านั้น
- ฟังก์ชันตัวในจะสามารถใช้ตัวแปรรับเข้าและตัวแปรต่างๆของฟังก์ชันตัวนอกได้ แต่ฟังก์ชันตัวนอกจะไม่สามารถใช้ตัวแปรรับเข้าและตัวแปรต่างๆของฟังก์ชันตัวในได้
อ็อบเจกต์ Math
อ็อบเจกต์ Math
มีคุณสมบัติและเมธอดต่างๆที่ใช้ในค่าคงที่และฟังก์ชันทางคณิตศาสตร์ ตัวอย่างเช่น, คุณสมบัติ PI
ของอ็อบเจกต์ Math
มีค่าของ pi (3.141...) ซึ่งคุณสามารถใช้ในแอปพลิเคชันได้ดังนี้
Math.PI
เช่นเดียวกัน, ฟังก์ชันพื้นฐานทางคณิตศาสตร์ก็คือเมธอดของอ็อบเจกต์ Math
ซึ่งประกอบด้วย ตรีโกณมิติ, ล็อกการิทึม, เลขยกกำลัง, และฟังก์ชันอื่นๆ ตัวอย่างเช่น, ถ้าคุณต้องการใช้ฟังก์ชันตรีโกณมิติ sine คุณสามารถเขียนได้ดังนี้
Math.sin(1.56)
สังเกตุว่าเมธอดตรีโกณมิติรับค่าเข้าเป็นมุมเรเดียน
ตารางต่อไปนี้สรุปเมธอดต่างๆของอ็อบเจกต์ Math
Method | Description |
---|---|
abs |
ค่าสัมบูรณ์ |
sin , cos , tan |
ฟังก์ชันมาตรฐานตรีโกณมิติ รับค่ามุมเรเดียน |
acos , asin , atan , atan2 |
ฟังก์ชันอินเวอร์สตรีโกณมิติ คืนค่ามุมเรเดียน |
exp , log |
เลขยกกำลัง และลอการิทึมธรรมชาติ, ฐาน e |
ceil |
คืนค่าเลขจำนวนเต็ม ที่มากกว่าหรือเท่ากับค่าที่รับเข้ามา |
floor |
คืนค่าเลขจำนวนเต็ม ที่มากที่สุดแต่น้อยกว่าหรือเท่ากับค่าที่รับเข้ามา |
min , max |
คืนค่าที่มากกว่าหรือน้อยกว่า (ตามลำดับ) ของสองค่าที่รับเข้ามา |
pow |
ยกกำลัง, ค่ารับเข้าตัวแรกเป็นฐาน ตัวที่สองเป็นเลขกำลัง |
random |
คืนค่าตัวเลขสุ่ม ที่อยู่ระหว่าง 0 และ 1 |
round |
ปัดค่าตัวเลขรับเข้าให้เป็นเลขตำนวนเต็มที่ใกล้เคียงที่สุด |
sqrt |
รากที่สอง |
ที่ไม่เหมือนกับอ็อบเจกต์อื่นคือ คุณไม่จำเป็นต้องสร้างอ็อบเจกต์ Math
ของตัวเอง คุณใช้จากอ็อบเจกต์ Math
พื้นฐานเสมอ
อ็อบเจกต์ Number
อ็อบเจกต์ Number
มีคุณสมบัติต่างๆที่ใช้เป็นตัวเลขค่าคงที่ เช่นค่ามากสุด, NaN
(not-a-number), ค่าอนันต์ (infinity) โดยคุณไม่สามารถเปลี่ยนค่าคุณสมบัติเหล่านี้ได้ และมีวิธีการใช้งานดังนี้:
var biggestNum = Number.MAX_VALUE; var smallestNum = Number.MIN_VALUE; var infiniteNum = Number.POSITIVE_INFINITY; var negInfiniteNum = Number.NEGATIVE_INFINITY; var notANum = Number.NaN;
คุณมักอ้างถึงคุณสมบัติจากอ็อบเจกต์ Number
พื้นฐานตามวิธีข้างบนเสมอ ไม่ใช่จากอ็อบเจกต์ Number
ที่คุณสร้างเอง
ตารางต่อไปนี้สรุปคุณสมบัติต่างๆของอ็อบเจกต์ Number
Property | Description |
---|---|
MAX_VALUE |
ตัวเลขที่มากที่สุด |
MIN_VALUE |
ตัวเลขที่น้อยที่สุด |
NaN |
ค่าข้อมูลที่ไม่ใช่ตัวเลข ("not a number") |
NEGATIVE_INFINITY |
ค่าลบอนันต์, ได้จากการหารด้วยศูนย์ (overflow) |
POSITIVE_INFINITY |
ค่าบวกอนันต์, ได้จากการหารด้วยศูนย์ (overflow) |
โปรโตไทป์ของ Number
มีเมธอดที่ช่วยแปลงค่าจากอ็อบเจกต์ Number
หลายรูปแบบ โดยตารางต่อไปนี้สรุปเมธอดต่างๆของ Number.prototype
Method | Description |
---|---|
toExponential |
คืนค่าสตริงจากตัวเลข ในรูปแบบเลขยกกำลัง |
toFixed |
คืนค่าสตริงจากตัวเลข ในรูปแบบทศนิยม โดยระบุจำนวนหลักทศนิยม |
toPrecision |
คืนค่าสตริงจากตัวเลข ในรูปแบบทศนิยม โดยระบุนัยสำคัญ |
toSource |
คืนค่าข้อมูลอ็อบเจกต์จากอ็อบเจกต์ Number ที่กำหนด คุณสามารถใช้เพื่อสร้างอ็อบเจกต์ใหม่ได้ แทนที่เมธอด Object.toSource() |
toString |
คืนค่าสตริงจากอ็อบเจกต์ที่กำหนด แทนที่เมธอด Object.toString |
valueOf |
คืนชนิดข้อมูลพื้นฐานของอ็อบเจกต์ที่ระบุ แทนที่เมธอด Object.toString |
อ็อบเจกต์ RegExp
อ็อบเจกต์ RegExp
ช่วยให้คุณทำงานกับ regular expression ได้ โดยมีรายละเอียดอยู่ที่ Regular Expressions
อ็อบเจกต์ String
อ็อบเจกต์ String
คือตัวหุ้มข้อมูลพื้นฐานสตริง โดยต้องไม่สับสนระหว่างค่าข้อมูลสตริง กับอ็อบเจกต์ String
ในตัวอย่างโค้ดต่อไปนี้, ได้ทำการสร้างค่าข้อมูล s1
และอ็อบเจกต์ String s2
:
var s1 = "foo"; //creates a string literal value var s2 = new String("foo"); //creates a String object
คุณสามารถใช้เมธอดใดก็ได้ของอ็อบเจกต์ String
กับค่าข้อมูลสตริง — จาวาสคริปต์จะแปลงค่าข้อมูลสตริงให้เป็นอ็อบเจดต์ String
ชั่วคราว และเรียกใช้เมธอด แล้วทิ้งอ็อบเจกต์ String
ชั่วคราวนั้นไป โดยคุณสามารถใช้คุณสมบัติ String.length
กับค่าข้อมูลสตริงได้ด้วย
คุณควรใช้ค่าข้อมูลสตริง ถ้าคุณไม่จำเป็นต้องใช้อ็อบเจกต์ String เพราะว่าอ็อบเจกต์ String อาจจะให้ผลลัพธ์ที่ไม่คาดคิดได้:
var s1 = "2 + 2"; //creates a string literal value var s2 = new String("2 + 2"); //creates a String object eval(s1); //returns the number 4 eval(s2); //returns the string "2 + 2"
อ็อบเจกต์ String
มีคุณสมบัติเดียวคือ length
ซึ่งระบุจำนวนอักขระในสตริง เช่น, ในโค้ดทำให้ x
มีค่าเป็น 13 เพราะ "Hello, World"
มีความยาว 13 อักขระ:
var mystring = "Hello, World!"; var x = mystring.length;
อ็อบเจกต์ String
มีเมธอดสองชนิด: ชนิดแรกจะคืนค่าที่เปลี่ยนไปของตัวสตริงเอง เช่น substring
และ toUpperCase
อีกชนิดจะคืนค่าสตริงที่ถูกจัดรูปแบบ HTML เช่น bold
และ link
เช่น, ในตัวอย่างก่อนหน้า ทั้ง mystring.toUpperCase()
และ "hello, world!".toUpperCase()
ต่างก็คืนค่าสตริง "HELLO, WORLD!"
เมธอด substring
รับค่าข้อมูลเข้าสองตัว และคืนสตริงย่อยระหว่างค่าสองค่านั้น จากตัวอย่างก่อนหน้า, mystring.substring(4, 9)
จะคืนค่าสตริง "o, Wo" โดยดูข้อมูลเพิ่มเติมเรื่อง substring
ของอ็อบเจกต์ String
ได้ใน JavaScript Reference
อ็อบเจกต์ String
มีเมธอดหลายตัวที่สามารถจัดรูปแบบ HTML ได้ เช่น bold
ใช้สร้างตัวหนังสือตัวทึบ และ link
ใช้สร้างไฮเปอร์ลิิ๊งค์ ตัวอย่างเช่น, คุณสามารถสร้างไฮเปอร์ลิิ๊งค์ให้ URL สมมุติ ด้วยเมธอด link
ดังนี้:
mystring.link("https://www.helloworld.com")
ตารางต่อไปนี้ สรุปเมธอดต่างๆของอ็อบเจกต์ String
Method | Description |
---|---|
anchor |
สร้าง <a> ที่ระบุชื่อ |
big , blink , bold , fixed , italics , small , strike , sub , sup |
สร้างสตริงรูปแบบ HTML |
charAt , charCodeAt |
คืนค่าอักขระ หรือรหัสอักขระ จากตำแหน่งที่กำหนดในสตริง |
indexOf , lastIndexOf |
คืนค่าตำแหน่งของสตริงย่อยในสตริง หรือตำแหน่งสุดท้ายของสตริงย่อย ตามลำดับ |
link |
สร้างไฮเปอร์ลิงค์ HTML |
concat |
รวมสองสตริงเข้าด้วยกัน และคืนสตริงใหม่ |
fromCharCode |
สร้างสตริงจากลำดับข้อมูลยูนิโค้ด เป็นเมธอดของชนิดอ็อบเจกต์ String, ไม่ใช่ของอ็อบเจกต์ String |
split |
แบ่งอ็อบเจกต์ String เป็นอาร์เรย์ของสตริง โดยแยกสตริงให้เป็นหลายๆสตริงย่อย |
slice |
ดึงส่วนของสตริงออก และคืนสตริงใหม่ |
substring , substr |
คืนสตริงย่อยที่ระบุโดยตำแหน่งเริ่มต้นและสิ้นสุด หรือตำแหน่งเริ่มต้นและความยาวที่ต้องการ |
match , replace , search |
ใช้กับ regular expression |
toLowerCase , toUpperCase |
คืนสตริงในแบบตัวอักษรเล็กทั้งหมด หรือใหญ่ทั้งหมด ตามลำดับ |