在 JS 中一切皆對象,並提供了多個內置對象,比如:String、Array、Date 等,此外還支持自定義對象。對象只是一種特殊類型的數據,並擁有屬性和方法,屬性是與對象相關的值,方法是能夠在對象上執行的動作。
1、String 對象
String 對象用於處理文本,也就是字符串。一個字符串用於存儲一系列的字符,通常 JS 字符串是原始值,可以使用變量聲明,也可以使用 new 關鍵字將字符串定義為一個對象,在 JS 中並不提倡使用 new 關鍵字創建對象。原始值字符串是沒有屬性和方法的,但是可以使用 JS 的屬性和方法,因為 JS 在執行屬性和方法時可以把原始值視為對象。
可以使用 JS 內置的 length 屬性來計算字符串的長度。比如:
var str = "abcdefghijklmnopqrstuvwxyz"; alert(str.length); //返回:26
下面是一些字符串常用的方法:
(1)、charAt()
str.charAt(index) 返回指定索引位置的字符,也就是獲取字符串的某一位字符。
(2)、concat()
str1.concat(str2, str3, ...., strN) 用於連接兩個或多個字符串,返回連接後的字符串。
(3)、indexOf()
str.indexOf(某個字符, strat) 返回字符串中某個字符從指定位置開始首次出現的位置,第二個參數可選,規定在字符串中開始查找的位置,他的合法值為 0 到字符串的長度 -1:str.length-1,如果不設置該參數,則從字符串的首字符開始查找。返回值為數值,如果找到則返回該字符首次出現的位置,沒找到則返回 -1。
(4)、search()
search(str/RegExp) 返回字符串中某個字符首次出現的位置,該參數為字符或者正則表達式,配合正則效果更好,返回值為數值,如果沒有匹配到,則返回 -1。
indexOf() 和 search() 區別:
這兩個方法都返回字符首次出現的位置,但是配合正則使用 search() 要比 indexOf() 更強大,如果是一個普通的字符串或者對一個具體的字符串來提取,那麼使用 indexOf() 的效率更好,更省資源,但如果是查找特殊的字符串,比如有數字有字母,那麼 indexOf() 就沒辦法執行了,必須要使用正則表達式和 search() 方法。
(5)、match()
match(str/RegExp) 用於查找字符串中指定的字符,並且返回該字符,該方法配合正則使用效果更好,如果不使用正則表達式,則只是返回首次出現的指定字符,不會再向後匹配,如果配合正則並且全局匹配,則以數組形式返回字符串中所有指定的字符,如果沒找到,則返回 null。
(6)、replace()
replace(str/RegExp, newstr) 用於字符串中將一些字符替換成另一些字符,返回一個新字符串。該方法有兩個參數,第一個參數規定需要被替換的字符,第二個參數為新字符,就是替換後要顯示的字符。配合正則使用效果更好,可以替換所有匹配。最常見的應用就是:敏感詞過濾。
(7)、lastIndexOf()
lastIndexOf() 和indexOf 相反,lastIndexOf(某個字符, strat) 返回字符串中某個字符從指定位置開始最後出現的位置,在指定位置從後向前查找。第二個參數可選,他的合法值為0到字符串的長度 -1:str.length-1,如果不設置該參數,則從字符串的最後一個字符開始查找。返回值為數值,如果找到則返回該字符最後出現的位置,沒找到則返回 -1。
(8)、slice()
slice(start, end) 提取字符串的某個部分,並以新的字符串返回被提取的部分,不包括結束位置的字符。第一個參數為起始位置,第一個字符的位置為 0,第二個參數 end 可選,結束位置的下標,如果不設置該參數,則提取從起始位置開始到字符串最後一個字符的子字符串。提取字符的參數可以是負數,則規定的是從字符串的尾部位置開始算起,也就是說:-1 代表字符串最後一個字符,-2 指倒數第二個字符,依次類推。提取全部字符可寫為:slice(0),也可以不設置參數,直接使用。
(9)、substr()
substr(start, length) 提取字符串從開始位置指定字符串長度的字符,並以新的字符串返回被提取的部分。該方法可以替代 substring() 和 slice() 來使用。第一個參數為起始位置,可以是負數,則從尾部開始算起。第二個參數為提取字符串的長度,該參數可選,且不能小於 1,否則返回一個空字符串,如果不設置該參數,則返回從起始位置開始到最後一個字符的子字符串。
(10)、substring()
substring(from, to) 提取介於字符串指定的兩個下標中間的字符,並以新的字符串返回被提取的部分,不包括結束位置的字符。第一個參數規定提取子串的第一個字符在字符串中的位置,簡單說就是開始位置,該參數是一個非負的整數。第二個參數是要提取的子串最後一個字符在字符串中的位置,也就是結束位置,該參數可選,為一個非負的整數,如果不設置該參數,則返回從開始位置到最後一個字符的子字符串。如果第二個參數比第一個參數大,則在提取子串之前會將較小的數作為開始位置,較大的作為結束位置。
slice()、substr() 、substring()三者區別:
從定義上看,三者都為提取子字符串,slice() 和substring() 可以看成是同類,參數都是字符串的某個開始位置到結束位置,都不包括結束位置。而 substr() 則是提取從字符串的某個位置開始,指定字符串長度的子字符串。他們的共同點都是:第二個參數可選,如果不設置,都返回從開始位置到最後一個字符的子字符串。
從可設置的參數看,slice() 的兩個參數都可為負數,表示從尾部開始算起。substr() 的第一個參數也可以設置為負數,而 substring() 的參數則不接受負數,如果設置為負數或者其他無效的數,則會被當作 0 處理。
(11)、split()
str.split() 用於分割字符串,返回字符串數組。該方法有2個可選的參數,第一個參數為分割方式,可以是正則表達式,第二個參數設置返回字符串的最大長度。
<script> var str = "Good good study day day up!"; //忽略參數: var arr = str.split(); document.write(arr); //返回:Good good study day day up! //分割每個字符包括空格: var arr = str.split(''); document.write(arr); //返回:G,o,o,d, ,g,o,o,d, ,s,t,u,d,y, ,d,a,y, ,d,a,y, ,u,p,! //使用空格作為分割符: var arr = str.split(' '); document.write(arr); //返回:Good,good,study,day,day,up! //規定返回數組的最大長度 var arr = str.split(' ', 3); document.write(arr); //返回:Good,good,study //使用一個字符作為分割符: var arr = str.split('d'); document.write(arr); //返回:Goo, goo, stu,y ,ay ,ay up! </script>
(12)、toString()
toString() 方法用於將對象轉換為字符串。
(13)、valueOf()
valueOf() 方法用於將對象轉換為一個基本數據的值,返回對象的原始值。
(14)、toLowerCase()
str.toLowerCase() 方法用於將字符串轉換為小寫。
(15)、toUpperCase()
str.toUpperCase() 方法用於將字符串轉換為大寫。
2、Number 對象
JS 只有一種數字類型,可以是整數,也可以是小數。整數最大可以有 15 位,小數最大可以有17位,在 JS 中小數運算並不是非常精確,所以大多數情況下,需要將小數轉換為整數。注意:整數的第一位不能為 0,否則會得到意想不到的結果。如下面的運算結果:
var sum = 0.1 + 0.2; alert(sum); //返回:0.30000000000000004
(1)、infinity 和 -infinity
當數字運算超過了 JS 所能表示的數字上限時,結果就為一個無窮大的值,在 JS 中用infinity表示。當負數運算超過了 JS 的負數范圍,結果就為一個負無窮大的值,也叫無窮小,在 JS 中用 -infinity 表示。基於無窮大的加減乘數運算,他們的結果還是無窮大,並保留正負號。一個整數或者負數除以0,得到的都是無窮大。
(2)、NaN
NaN 表示非數字的特殊值,該屬性用於指示一個值不是數字。返回值為布爾值。可以使用函數 isNaN() 判斷一個值是否是 NaN 值。
var x = 123; var y = 'abc'; alert(isNaN(x)); //返回:false alert(isNaN(y)); //返回:ture alert(x == y); //返回:false //NaN和NaN是不相等的。所以為假。 var a = 2/0; alert(isNaN(a)); //返回:false //無窮大是一個數字
Number 對象屬性:
(1)、MAX_VALUE 和 MIN_VALUE
MAX_VALUE 表示最大的數,它的近似值為: 1.7976931348623157 x 10308。如果大於該數則表示無窮大。MIN_VALUE 表示最小的數,它的近似值為:5 x 10-324,MIN_VALUE 是最接近 0 的數,但不是負值。比該屬性小的值用 0 表示。由於他們都是 Number 對象的靜態屬性,只能通過 Number 調用,所以使用自定義的 Number 將無法獲取屬性,返回值為 undefined。
//JS最大數 alert(Number.MAX_VALUE); //返回:1.7976931348623157e+308 //JS最小數 alert(Number.MIN_VALUE); //返回:5e-324 //e為科學計數法: var a = 123e5; var b = 123e-5; alert(a); //返回:12300000 alert(b); //返回:0.00123
(2)、POSITIVE_INFINITY 和 NEGATIVE_INFINITY
POSITIVE_INFINITY 屬性代表無窮大,表示比 MAX_VALUE 大的數。NEGATIVE_INFINITY 屬性表示負無窮大,表示比 MIN_VALUE 小的數。由於他們都是 Number 對象的靜態屬性,只能通過 Number 調用,所以使用自定義的 Number 將無法獲取屬性,返回值為 undefined。
alert(Number.POSITIVE_INFINITY); //返回:Infinity alert(Number.NEGATIVE_INFINITY); //返回:-Infinity
Number 對象方法:
(1)、toExponential()
toExponential(n) 可把對象的值轉換成指數計數法。該方法有一個可選的參數,用於規定計數法中的小數位數,包括 0 和 20 之內的值,如果不設置該參數,將使用盡可能多的數字。
(2)、toFixed()
toFixed(n) 可把數字轉換為字符串,並四捨五入為指定小數點後位數的數字。該方法必須設置一個參數,規定小數的位數,包括 0 和 20 之內的值,如果不設置該參數,將默認為 0。
(3)、toPrecision()
toPrecision(n) 可把數字格式化為指定的長度,如果超出指定的長度將轉換為指數計數法。該方法必須設置一個參數,規定轉換為指數計數法的最小位數,包括 1 和 21 之內的值,如果不設置該參數,則調用 toString() 方法,而不對數字轉換。
(4)、toString()
toString() 方法用於將對象轉換為字符串。
(5)、valueOf()
valueOf() 方法用於將對象轉換為一個基本數據的值,返回對象的原始值。
3、Math 對象
Math 對象的作用是:執行常見的算數任務。該對象無需在使用這個對象之前對它進行定義。
下面主要介紹 Math 對象的一些常用方法:
(1)、ceil()
Math.ceil() 可對一個數向上取整,如果參數是一個整數,該值不變。向上取整運算返回的是一個大於或等於該值並且與之最接近的整數。
alert(Math.ceil(-0.1)); //返回:0 alert(Math.ceil(-9.9)); //返回:-9 alert(Math.ceil(2.1)); //返回:3 alert(Math.ceil(2.9)); //返回:3 var num = 8; alert(Math.ceil(num)); //返回:8
(2)、floor()
Math.floor() 可對一個數進行向下取整,如果參數是一個整數,該值不變。向下取整運算返回一個小於或等於該值的最大整數。
alert(Math.floor(-0.1)); //返回:-1 alert(Math.floor(-9.9)); //返回:-10 alert(Math.floor(2.1)); //返回:2 alert(Math.floor(2.9)); //返回:2 var num = 8; alert(Math.floor(num)); //返回:8
(3)、round()
Math.round() 可把一個數字四捨五入為最接近的整數。
alert(Math.round(-0.1)); //返回:0 alert(Math.round(-9.9)); //返回:-10 alert(Math.round(2.49)); //返回:2 alert(Math.round(2.5)); //返回:3 var num=8; alert(Math.round(num)); //返回:8
(4)、random() 方法
Math.random() 可返回介於 0 ~ 1(大於或等於 0 但小於 1 )之間的一個隨機數。
//獲得一個隨機數: alert(Math.random()); //獲得 0~10 之間的隨機數: alert(Math.random()*10); //random ()方法和round()方法配合,可獲得一個不大於10的整數: alert(Math.round(Math.random()*10)); //隨機數每次返回的值都不同。
4、Array 對象
數組對象的作用是:使用單個變量來存儲一系列的值。
數組最常用的屬性就是 length,用於返回數組中數據的長度,也可用於設置數組的長度。
var arr = [1,2,3,4,5,6]; arr.length=3; alert(arr); //返回1,2,3 //arr.length=0; 可用於快速清空數組
下面主要介紹 Array 對象一些常用方法:
(1)、concat()
arr.concat(arr1, arr2, ..., arrN) 用於連接兩個或多個數組,該方法返回一個新數組,不改變原來數組。該方法的參數可以是具體的值,也可以是數組對象,可以是任意多個。如果該參數是具體的值,將把該值插入到原來的數組返回。
(2)、join()
join() 用於將數組中的所有元素轉換成一個字符串,元素是通過指定的分隔符分隔的。該方法有一個可選參數,用於指定分隔方式。如果不設置該參數,默認使用逗號分割。
var arr1 = [86,'010'] var arr2 = [15278654321] var arr3 = arr1.concat(arr2); document.write(arr3.join()); //返回:86,010,15278654321 document.write(arr3.join(".")); //返回:86.010.15278654321 document.write(arr3.join("-")); //返回:86-010-15278654321 document.write(arr3.join("|")); //返回:86|010|15278654321
(3)、reverse()
arr.reverse() 用於顛倒數組中元素的順序。
var arr = ['Banana', 'Orange', 'Apple']; document.write(arr); //返回:Banana, Orange, Apple document.write(arr.reverse()); //返回:Apple,Orange,Banana
(4)、slice()
arr.slice(start, end) 可從已有的數組中返回選定的元素。該方法也適用於提取子字符串。也不包括開始位置和結束位置的元素。第一個參數規定從何處開始選取,第二個參數可選,規定從何處結束選取,如果省略該參數,則返回從開始位置到數組尾部的所有元素。如果參數為負數,則從數組最後一個元素開始算起。
(5)、sort()
arr.sort(方法函數) 用於對數組的元素排序。排序可以是字母或數字,並按升序或降序。默認排序順序為按字母升序。使用數字排序,你必須通過一個函數作為參數來調用。函數指定數字是按照升序還是降序排列。如果數字排序不指定方法函數,默認是按照字母升序,則 100 會排在 15 前邊。
var arr = [99,15,21,2,8,56,100,1]; //默認排序: document.write(arr.sort()); //返回:1,100,15,2,21,56,8,99 //指定方法函數,按升序排序。 function ascNum(a,b) { return a-b; } document.write(arr.sort(ascNum)); //返回:1,2,8,15,21,56,99,100 //指定方法函數,按降序排序。 function desNum(a,b) { return b-a; } document.write(arr.sort(desNum)); //返回:100,99,56,21,15,8,2,1
(6)、shift()
arr.shift() 刪除數組的第一個元素。 此方法將改變數組的長度。
var arr = ['Banana', 'Orange', 'Apple']; document.write(arr.length); //返回:3 arr.shift(); document.write(arr); //返回:Orange,Apple document.write(arr.length); //返回:2
(7)、pop()
arr.pop() 刪除數組的最後一個元素。此方法將改變數組的長度。
var arr = ['Banana', 'Orange', 'Apple']; document.write(arr.length); //返回:3 arr.pop(); document.write(arr); //返回:Banana,Orange document.write(arr.length); //返回:2
(8)、unshift()
arr.unshift() 向數組開頭添加一個或多個元素。此方法將改變數組的長度。
var arr = ['Banana', 'Orange', 'Apple']; document.write(arr.length); //返回:3 arr.unshift('Mango', 'Pear'); document.write(arr); //返回:Mango,Pear,Banana,Orange,Apple document.write(arr.length); //返回:5
(9)、push()
arr.push() 向數組末尾添加一個或多個元素。此方法將該變數組的長度。
var arr= ['Banana', 'Orange', 'Apple']; document.write(arr.length); //返回:3 arr.push('Mango', 'Pear','Lemon'); document.write(arr); //返回:Banana,Orange,Apple,Mango,Pear,Lemon document.write(arr.length); //返回:6
(10)、splice()
arr.splice(start, length, arrElement1, ..., arrElementN) 用於刪除、插入或替換數組的元素。該方法會改變數組的原始數據。該方法有多個參數,前兩個為必須的參數。第一個參數規定從何處開始刪除或插入。第二個參數規定刪除元素的長度,如果設置為 0,則不刪除元素,如果不定義該參數,則刪除從 start 規定的位置開始到原數組結尾的所有元素。最後的參數可選,要添加到數組的新元素。
var arr = [1,2,3,4,5,6]; //刪除元素的應用: //從第2個位置開始,刪除長度為3。 arr.splice(2,3); document.write(arr+'<br>'); //返回:1,2,6 //插入元素的應用: //從第2個位置開始,刪除為0個元素,也就是不刪除,插入abc。 arr.splice(2,0,'a','b','c'); document.write(arr+'<br>'); //返回:1,2,a,b,c,3,4,5,6 //替換元素的應用: //從第2個位置開始,刪除3個元素,再插入def。 arr.splice(2,3,'d','e','f'); document.write(arr); //返回:1,2,d,e,f,6
(11)、toString()
toString() 方法可把數組轉換為字符串,並返回結果。
(12)、valueOf()
valueOf() 方法返回數組對象的原始值。
5、Date 對象
Date 對象用於處理日期和時間。可以通過 new 關鍵詞來定義 Date 對象。
下面例子是獲取當前的所有日期:
var d = new Date(); //獲取當前日期 document.write(d); //獲取當前的年份 document.write(d.getFullYear() + '年'); //獲取當前月份,月份從0開始計算,所以需要+1 document.write(d.getMonth() + 1 + '月'); //獲取當前是當月中的哪一天 document.write(d.getDate() + '日'); //獲取當前時間的小時 document.write(d.getHours() + '時'); //獲取當前時間的分鐘 document.write(d.getMinutes() + '分'); //獲取當前時的秒數 document.write(d.getSeconds() + '秒'); //獲取當前的毫秒數t document.write(d.getMilliseconds() + '毫秒'); //獲取星期 document.write('星期' + d.getDay()); //星期從0開始算起,從星期天開始計算。 //getDay()返回的是0-6的數字,0表示星期天。如果要返回相對應的“星期”,需要通過數組完成。 var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var week = d.getDay(); document.write(weekday[week]);
下面例子用於設置日期:
var d = new Date(); //設置年份 d.setFullYear(2020); document.write(d); //該方法也可用於設置月份(介於0-11之間)和天數(介於1-31之間)。 //月份:-1為去年的最後一月,-2為去年的倒數第二個月。 //12為明年的第一個月,13為明年的第二個月。 //天數:0為上個月最後一天,-1為上個月最後一天之前的天數。 //如果當月有31天,32為下個月第一天,如果當天只有30天,32則為下個月的第二天 d.setFullYear(2020, 11, -1); document.write(d); //設置月份(介於0-11之間),也可用於設置天數 d.setMonth(5); document.write(d); //設置天數(介於1-31之間) d.setDate(12); document.write(d); //設置小時 //值介於0(午夜)-23(晚上11點)之間,-1為昨天的最後一個小時,24為明天的第一個小時 d.setHours(24); document.write(d); //該方法也可用於設置分鐘、秒以及毫秒數。 //分鐘:介於0-59之間,-1為上一小時最後一分鐘,60為下一個小時第一分鐘 //秒:介於0-59之間,-1為上一分鐘最後一秒,60為下一分鐘第一秒 //毫秒:介於0-999之間,-1為上一秒鐘的最後一毫秒,1000為下一秒鐘的第一毫秒 d.setHours(21,30,1); document.write(d); //獲取小時 一個小應用:返回24小時之前的的時間 var d = new Date(); d.setHours(d.getHours()-24); document.write(d); //設置分鐘,也可用於設置秒數和毫秒數 d.setMinutes(20); document.write(d); //設置秒,也可用於設置毫秒 d.setSeconds(10); document.write(d); //設置毫秒 d.setMilliseconds(999); document.write(d);
getTime() 和 setTime()
var d = new Date(); //獲取1970年元旦距今的毫秒數 document.write(d.getTime()+'毫秒'); //向1970年元旦增加1325347200000毫秒,返回新日期 d.setTime(1325347200000); document.write(d); //獲取指定時間據1970年之間的毫秒數 var d = Date.parse("2012, 12, 12"); document.write(d+'毫秒'); //計算1970年元旦至今有多少年: var minutes = 1000*60; var hours = minutes*60; var day = hours*24; var year = day*365; var d = new Date(); var t = d.getTime(); var y = Math.round(t/year); document.write(y + '年');
日期轉換:
var d = new Date(); //當前時間 document.write(d); //將日期部分(不包括時分秒)轉換為字符串 document.write(d.toDateString()); //將日期部分(不包括年月日)轉換為字符串 document.write(d.toTimeString()); //根據本地時間將日期轉換為字符串 document.write(d.toLocaleString()); //根據本地時間將日期部分(不包括時分秒)轉換為字符串 document.write(d.toLocaleDateString()); //根據本地時間將日期部分(不包括年月日)轉換為字符串 document.write(d.toLocaleTimeString()); //使用ISO標准將日期轉換為字符串 //該標准格式為:YYYY-MM-DDTHH:mm:ss.sssZ document.write(d.toISOString()); //將日期轉換為JSON格式 //JSON格式與ISO標准是同樣的格式 document.write(d.toJSON());
toString() 方法可把日期對象轉換為字符串,當日期需要顯示為一個字符串時,該方法會被自動調用。
valueOf() 方法返回日期對象的原始值。該方法將返回1970年元旦至今的毫秒數。
6、數據類型轉換
JS 中有5種不同的數據類型:string、number、boolean、object、function。
3 種對象類型:Object、Date、Array。2 個不包含任何值的類型:ubll、undefined。
可以使用 typeof 操作符來查看 JS 變量的數據類型。
var str = '小明'; alert(typeof str); //返回:string var num = 12; alert(typeof num); //返回:number var num1 = NaN; alert(typeof num1); //返回:number var fun = function (){alert('abcd');}; alert(typeof fun); //返回:function var boo = true; alert(typeof boo); //返回:boolean var obj = document; alert(typeof obj); //返回:object var arr = [1,2,3,4]; alert(typeof arr); //返回:object var d = new Date(); alert(typeof d); //返回:object var json = {a:'12', b:21}; alert(typeof json); //返回:object var n = null; alert(typeof n); //返回:object var x; alert(typeof x); //返回:undefined alert(typeof y); //返回:undefined //未定義有2種情況: //1、真的沒有定義(如y) //2、雖然定義了,但是沒有給賦值(如x)
數組對象和日期對象無法通過 typeof 來判斷數據類型,因為都返回 object。可以使用 constructor 屬性來查看。constructor 屬性返回一個對象的構造函數,將返回的構造函數轉換為字符串,再判斷是否包含數組和日期。
//返回數組和日期的構造函數: var arr = ["abc", "123", "123abc", "abc123"]; alert(arr.constructor); //返回:function Array() { [native code] } var d = new Date; alert(d.constructor); //返回:function Date() { [native code] } var arr = ["abc", "123", "123abc", "abc123"]; function con(obj) { return arr.constructor.toString().indexOf("Array") > -1; } alert(con(arr)); //返回:ture var d = new Date(); function cons(obj) { return d.constructor.toString().indexOf("Date") > -1; } alert(cons(d)); //返回:ture
強制類型轉換,也叫顯式類型轉換。
(1)、轉換為字符串:
全局方法 string() 和 toString() 方法可用於將一個值轉換為字符串。string() 可用於任何類型的數字、字母、變量、表達式。
二者區別:
大多數值都有 toString() 方法,除了 null 和 undefined。字符串本身也可以使用 toString() 方法,將返回字符串的原始值。
任何值都可以使用 string() 方法,如果該值有 toString() 方法,則使用該方法,如果該值沒有 toString() 方法,那就為 null 和 undefined,則返回 null 和 undefined。
var str = '小明'; alert(String(str)); alert(str.toString()); //都返回:小明 var num = 123; alert(String(num)); alert(num.toString()); //都返回:123 var and = 123+100; alert(String(and)); alert(and.toString()); //都返回:223
(2)、轉換為數字:
全局方法 Number() 可以將字符串轉換為數字。空字符串轉換為 0,特殊值字符串將轉換為 NaN。
var str = '123'; alert(Number(str)); //返回:123 var str = ''; alert(Number(str)); //返回:0 var str = '200px'; alert(Number(str)); //返回:NaN
最常用的就是轉換為整數和小數。parseInt() 方法用於轉換整數。parseFloat() 方法用於轉換小數。
var a = '3.1' alert(parseInt(a)); //返回:3 var a = '3.9' alert(parseInt(a)); //返回:3 var a = '12px34'; alert(parseInt(a)); //返回:12 var a = 'px1234'; alert(parseInt(a)); //返回:NaN var d = '3.14'; alert(parseFloat(d)); //返回:3.14 var d = '3.99'; alert(parseFloat(d)); //返回:3.99
+ 運算符可以連接字符串,也可以將字符串轉換為數字。
var n = '12ab'; var x = '34'; alert(n+x); //返回:12ab34 alert(parseInt(n)+x); //返回:1234 var y = + x; alert(typeof x); //返回:string //若變量不能轉換,但仍然是一個數字,NaN alert(typeof y); //返回:number
NaN 的數據類型是 number,NaN 表示非數字(Not a Number),所以本身也為數字。
var a = parseInt('abc'); var b = parseInt('12edf'); var c = 12+NaN; alert(c); //返回NaN //判斷NaN是否等於NaN alert(a==b); //返回false //isNaN判斷一個變量是不是NaN alert(isNaN(a)); //返回:true alert(isNaN(b)); //返回:flase
利用這一特性,可以做一個簡易的文本框求和,用戶輸入的文本框的值為字符串,需要將字符串轉換為數字,再判斷輸入的值是否為數字。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本框求和</title> </head> <script> window.onload = function (){ var x = document.getElementById('txt1'); var y = document.getElementById('txt2'); var oBth = document.getElementById('but1'); oBth.onclick = function (){ //將輸入的值轉換為整數: var n1 = parseInt(x.value); var n2 = parseInt(y.value); //判斷用戶輸入的n1是不是非數字 if(isNaN(n1)){ alert('輸入的第一個數字有誤'); } else if(isNaN(n2)){ alert('輸入的第二個數字有誤'); } //若都輸入的為數字,則求和 else{ alert(n1+n2); } }; }; </script> <body> <input id="txt1" type="text" > <input id="txt2" type="text" > <input id="but1" type="button" value="求和"> </body> </html>
全局方法 Number() 可將布爾值轉換為數字。
alert(Number(false)); //返回 0 alert(Number(true)); // 返回 1
隱式類型轉換,也叫自動轉換類型。
當 JS 嘗試操作一個“錯誤”的數據類型時,會自動轉換為“正確”的類型再去執行,這就是隱式類型轉換。直接看幾個例子:
var a = 2; var b = '2'; //比較數字2和字符串2是否相等 alert(a==b); //返回:true //why? 相等比較實際上比較前是先將a和b轉換為同一類型,再進行比較的。 //比較數字2和字符串2是否全等 alert(a===b); //返回:返回false //why? 全等比較不轉換類型,直接比較。a為數字,b為字符串。 //所以,一般情況下,采用全等比較,更為嚴謹。 var c = '12'; var d = '5'; //兩個值為數字的字符串做+運算 alert(c+d); //返回125 //why? "+"運算符有2種功能:1、字符串連接。2、算術運算(數字相加)。系統會采用最直接的方法。 //兩個值為數字的字符串做-運算 alert(c-d); //返回7 //why? 在做減法運算時會先轉換為同類型,再做運算。"-"運算符只有1種功能。算術運算(數字相減)。