Number() 轉換為數字， String() 轉換為字符串， Boolean() 轉化為布爾值。

JavaScript 數據類型

在 JavaScript 中有 5 種不同的數據類型：

• string

• number

• boolean

• object

• function

3 種對象類型：

• Object

• Date

• Array

2 個不包含任何值的數據類型：

• null

• undefined

typeof 操作符

你可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。

實例

typeof "John" // 返回 string

typeof 3.14 // 返回 number

typeof NaN // 返回 number

typeof false // 返回 boolean

typeof [1,2,3,4] // 返回 object

typeof {name:'John', age:34} // 返回 object

typeof new Date() // 返回 object

typeof function () {} // 返回 function

typeof myCar // 返回 undefined (如果 myCar 沒有聲明)

typeof null // 返回 object

請注意：

• NaN 的數據類型是 number

• 數組(Array)的數據類型是 object

• 日期(Date)的數據類型為 object

• null 的數據類型是 object

• 未定義變量的數據類型為 undefined

如果對象是 JavaScript Array 或 JavaScript Date ，我們就無法通過 typeof 來判斷他們的類型，因為都是 返回 Object。

constructor 屬性

constructor 屬性返回所有 JavaScript 變量的構造函數。

實例

"John".constructor // 返回函數 String() { [native code] }

(3.14).constructor // 返回函數 Number() { [native code] }

false.constructor // 返回函數 Boolean() { [native code] }

[1,2,3,4].constructor // 返回函數 Array() { [native code] }

{name:'John', age:34}.constructor // 返回函數 Object() { [native code] }

new Date().constructor // 返回函數 Date() { [native code] }

function () {}.constructor // 返回函數 Function(){ [native code] }

你可以使用 constructor 屬性來查看是對象是否為數組 (包含字符串 "Array"):

實例

function isArray(myArray) {

return myArray.constructor.toString().indexOf("Array") > -1;

}

你可以使用 constructor 屬性來查看是對象是否為日期 (包含字符串 "Date"):

實例

function isDate(myDate) {

return myDate.constructor.toString().indexOf("Date") > -1;

}

JavaScript 類型轉換

JavaScript 變量可以轉換為新變量或其他數據類型：

• 通過使用 JavaScript 函數

• 通過 JavaScript 自身自動轉換

將數字轉換為字符串

全局方法 String() 可以將數字轉換為字符串。

該方法可用于任何類型的數字，字母，變量，表達式：

實例

String(x) // 將變量 x 轉換為字符串并返回

String(123) // 將數字 123 轉換為字符串并返回

String(100 + 23) // 將數字表達式轉換為字符串并返回

Number 方法 toString() 也是有同樣的效果。

實例

x.toString()

(123).toString()

(100 + 23).toString()

在 Number 方法 章節中，你可以找到更多數字轉換為字符串的方法：

將布爾值轉換為字符串

全局方法 String() 可以將布爾值轉換為字符串。

String(false) // 返回 "false"

String(true) // 返回 "true"

Boolean 方法 toString() 也有相同的效果。

false.toString() // 返回 "false"

true.toString() // 返回 "true"

將日期轉換為字符串

全局方法 String() 可以將日期轉換為字符串。

String(Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 toString() 也有相同的效果。

實例

Date().toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

在 Date 方法 章節中，你可以查看更多關于日期轉換為字符串的函數：

將字符串轉換為數字

全局方法 Number() 可以將字符串轉換為數字。

字符串包含數字(如 "3.14") 轉換為數字 (如 3.14).

空字符串轉換為 0。

其他的字符串會轉換為 NaN (不是個數字)。

Number("3.14") // 返回 3.14

Number(" ") // 返回 0

Number("") // 返回 0

Number("99 88") // 返回 NaN

在 Number 方法 章節中，你可以查看到更多關于字符串轉為數字的方法：

一元運算符 +

Operator + 可用于將變量轉換為數字：

實例

var y = "5"; // y 是一個字符串

var x = + y; // x 是一個數字

如果變量不能轉換，它仍然會是一個數字，但值為 NaN (不是一個數字):

實例

var y = "John"; // y 是一個字符串

var x = + y; // x 是一個數字 (NaN)

將布爾值轉換為數字

全局方法 Number() 可將布爾值轉換為數字。

Number(false) // 返回 0

Number(true) // 返回 1

將日期轉換為數字

全局方法 Number() 可將日期轉換為數字。

d = new Date();

Number(d) // 返回 1404568027739

日期方法 getTime() 也有相同的效果。

d = new Date();

d.getTime() // 返回 1404568027739

自動轉換類型

當 JavaScript 嘗試操作一個 "錯誤" 的數據類型時，會自動轉換為 "正確" 的數據類型。

以下輸出結果不是你所期望的：

5 + null // 返回 5 null 轉換為 0

"5" + null // 返回"5null" null 轉換為 "null"

"5" + 1 // 返回 "51" 1 轉換為 "1"

"5" - 1 // 返回 4 "5" 轉換為 5

自動轉換為字符串

當你嘗試輸出一個對象或一個變量時 JavaScript 會自動調用變量的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"} // toString 轉換為 "[object Object]"

// if myVar = [1,2,3,4] // toString 轉換為 "1,2,3,4"

// if myVar = new Date() // toString 轉換為 "Fri Jul 18 2014 09:08:55 GMT+0200"

數字和布爾值也經常相互轉換：

// if myVar = 123 // toString 轉換為 "123"

// if myVar = true // toString 轉換為 "true"

// if myVar = false // toString 轉換為 "false"

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

要識別圖片類型，然后進行轉換；

function btoimg(buffer) {

var mime;

var a = new Uint8Array(buffer);

var nb = a.length;

if (nb < 4)

return null;

var b0 = a[0];

var b1 = a[1];

var b2 = a[2];

var b3 = a[3];

if (b0 == 0x89 && b1 == 0x50 && b2 == 0x4E && b3 == 0x47)

mime = 'image/png';

else if (b0 == 0xff && b1 == 0xd8)

mime = 'image/jpeg';

else if (b0 == 0x47 && b1 == 0x49 && b2 == 0x46)

mime = 'image/gif';

else

return null;

var binary = "";

for (var i = 0; i < nb; i++)

binary += String.fromCharCode(a[i]);

var base64 = window.btoa(binary);

var image = new Image();

//image.onload = onLoad;

image.id = "upload";

image.src = 'data:' + mime + ';base64,' + base64;

return image;

}

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

大家都知道 JavaScript 是弱類型語言，而且 JavaScript 聲明變量的時候并沒有預先確定的類型，變量的類型就是其值的類型，也就是說變量當前的類型由其值所決定,夸張點說上一秒種的String，下一秒可能就是個Number類型了，這個過程可能就進行了某些操作發生了強制類型轉換。雖然弱類型的這種不需要預先確定類型的特性給我們帶來了便利，同時也會給我們帶來困擾，為了能充分利用該特性就必須掌握類型轉換的原理。

下面我們來介紹JavaScript類型在什么情況下會發生類型自動轉換：

什么時候自動轉換為string類型

一、在沒有對象的前提下

字符串的自動轉換，主要發生在字符串的加法運算時。當一個值為字符串，另一個值為非字符串，則后者轉為字符串。

'2' + 1 // '21' 
'2' + true // "2true" 
'2' + false // "2false" 
'2' + undefined // "2undefined" 
'2' + null // "2null"

二、當有對象且與對象+時候

//toString的對象 
var obj2 = { 
 toString:function(){ 
 return 'a' 
 } 
} 
console.log('2'+obj2) 
//輸出結果2a 
 
//常規對象 
var obj1 = { 
 a:1, 
 b:2 
} 
console.log('2'+obj1)； 
//輸出結果 2[object Object] 
 
//幾種特殊對象 
'2' + {} // "2[object Object]" 
'2' + [] // "2" 
'2' + function (){} // "2function (){}" 
'2' + ['koala', 1] // 2koala,1

string類型轉換開發過程中可能出錯的點：

var obj = { 
 width: '100' 
}; 
 
obj.width + 20 // "10020"

什么時候自動轉換為Number類型

一、有加法運算符，但是無String類型的時候，都會優先轉換為Number類型

true + 0 // 1 
true + true // 2 
true + false //1

二、除了加法運算符，其他運算符都會把運算自動轉成數值。

'5' - '2' // 3 
'5' * '2' // 10 
true - 1 // 0 
false - 1 // -1 
'1' - 1 // 0 
'5' * [] // 0 
false / '5' // 0 
'abc' - 1 // NaN 
null + 1 // 1 
undefined + 1 // NaN 
 
//一元運算符（注意點） 
+'abc' // NaN 
-'abc' // NaN 
+true // 1 
-false // 0

注意：null轉為數值時為0，而undefined轉為數值時為NaN。

什么時候進行布爾轉換

一、布爾比較時

二、if(obj) , while(obj)等判斷時或者 三元運算符只能夠包含布爾值

條件部分的每個值都相當于false，使用否定運算符后，就變成了true

if ( !undefined 
 && !null 
 && !0 
 && !NaN 
 && !'' 
) { 
 console.log('true'); 
} // true 
 
//下面兩種情況也會轉成布爾類型 
expression ? true : false 
!! expression

js中的數據類型判斷

三種方式，分別為 typeof、instanceof 和Object.prototype.toString()

一、typeof

通過 typeof操作符來判斷一個值屬于哪種基本類型。

typeof 'seymoe' // 'string' 
typeof true // 'boolean' 
typeof 10 // 'number' 
typeof Symbol() // 'symbol' 
typeof null // 'object' 無法判定是否為 null 
typeof undefined // 'undefined' 
 
typeof {} // 'object' 
typeof [] // 'object' 
typeof(() => {}) // 'function'

上面代碼的輸出結果可以看出，

1、null 的判定有誤差，得到的結果 如果使用 typeof，null得到的結果是object

2、操作符對對象類型及其子類型，例如函數（可調用對象）、數組（有序索引對象）等進行判定，則除了函數都會得到 object 的結果。

綜上可以看出typeOf對于判斷類型還有一些不足，在對象的子類型和null情況下。

二、instanceof

通過 instanceof 操作符也可以對對象類型進行判定，其原理就是測試構造函數的prototype 是否出現在被檢測對象的原型鏈上。

[] instanceof Array // true 
({}) instanceof Object // true 
(()=>{}) instanceof Function // true

注意：instanceof 也不是萬能的。 舉個例子：

let arr = [] 
let obj = {} 
arr instanceof Array // true 
arr instanceof Object // true 
obj instanceof Object // true

在這個例子中，arr 數組相當于 new Array() 出的一個實例，所以 arr.__proto__ === Array.prototype，又因為 Array屬于 Object 子類型，即Array.prototype.__proto__ === Object.prototype，因此 Object 構造函數在 arr 的原型鏈上。所以 instanceof 仍然無法優雅的判斷一個值到底屬于數組還是普通對象。

Object.prototype.toString() 可以說是判定 JavaScript 中數據類型的終極解決方法了，具體用法請看以下代碼：

Object.prototype.toString.call({}) // '[object Object]' 
Object.prototype.toString.call([]) // '[object Array]' 
Object.prototype.toString.call(() => {}) // '[object Function]' 
Object.prototype.toString.call('seymoe') // '[object String]' 
Object.prototype.toString.call(1) // '[object Number]' 
Object.prototype.toString.call(true) // '[object Boolean]' 
Object.prototype.toString.call(Symbol()) // '[object Symbol]' 
Object.prototype.toString.call(null) // '[object Null]' 
Object.prototype.toString.call(undefined) // '[object Undefined]' 
 
Object.prototype.toString.call(new Date()) // '[object Date]' 
Object.prototype.toString.call(Math) // '[object Math]' 
Object.prototype.toString.call(new Set()) // '[object Set]' 
Object.prototype.toString.call(new WeakSet()) // '[object WeakSet]' 
Object.prototype.toString.call(new Map()) // '[object Map]' 
Object.prototype.toString.call(new WeakMap()) // '[object WeakMap]'

我們可以發現該方法在傳入任何類型的值都能返回對應準確的對象類型。用法雖簡單明了，但其中有幾個點需要理解清楚：

1、該方法本質就是依托Object.prototype.toString()方法得到對象內部屬性 [[Class]]

2、傳入原始類型卻能夠判定出結果是因為對值進行了包裝

3、null 和 undefined 能夠輸出結果是內部實現有做處理

總結

重點學習幾種類型自動轉換，實際開發中會經常遇到這樣的bug，數值大還好發現，越小越容易忽略。

喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！