搜尋
首頁web前端前端問答javascript如何轉資料類型
javascript如何轉資料類型Sep 16, 2021 pm 06:04 PM
javascript資料型別轉換

javascript轉資料類型的方法:1、根據運算環境自動轉換值的資料類型,以滿足運算需求;2、使用toString()、String()、parseInt()等JavaScript內建函數來強制轉換資料型別。

javascript如何轉資料類型

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript是一門動態語言,所謂的動態語言可以暫時理解為語言中的一切內容都是不確定的。例如一個變量,這一刻是個整數,下一時刻可能會變成字串了。雖然變數的資料類型是不確定的,但是各種運算子對資料類型是有要求的。如果運算子發現,運算子的型別與預期不符,就會自動轉換型別

簡單來說,JavaScript 能夠根據運算環境自動轉換值的類型,以滿足運算需求。

範例:使用加號運算子把值轉換為字串

//把数字转换为字符串
var n = 123;
n = n + "";
console.log(typeof n); //返回类型为 string

範例:使用乘運算子把字串轉為數值

var n = "123";
n = n * 1;
console.log(typeof n); //返回类型为 number

但在許多情況下需要開發者手動轉換資料型別(強制型別轉換),以控制運算過程。

1、其他的資料型別轉換為String

方式一:toString()方法

調用被轉換資料類型的toString()方法,該方法不會影響到原變量,它會將轉換的結果傳回,但是注意:null和undefined這兩個值沒有toString,如果呼叫他們的方法,會報錯。

var a = 123
a.toString()//"123"
var b = null;
b.toString()//"报错"
var c = undefined
c.toString()//"报错"

採用Number 類型的toString() 方法的基底模式,可以用不同的基底輸出數字,例如二進位的基底是2,八進位的基底是8,十六進位的基底是16

var iNum = 10;
alert(iNum.toString(2));        //输出 "1010"
alert(iNum.toString(8));        //输出 "12"
alert(iNum.toString(16));       //输出 "A"

方式二:String()函數

使用String()函數做強制型別轉換時,對於Number和Boolean其實就是呼叫的toString()方法,

但是對於null和undefined,就不會呼叫toString()方法,它會將null直接轉換為"null",將undefined 直接轉換為"undefined"

var a = null
String(a)//"null"
var b = undefined
String(b)//"undefined"

String方法的參數如果是對象,則傳回一個類型字串;如果是數組,則傳回該數組的字串形式。

String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

2、其他的資料型別轉換為Number

方式一:使用Number()函數

下面分成兩種情況討論,一種是參數是原始型別的值,另一種是參數是物件

(1)原始型別值

①字串轉數字

  • 如果是純數字的字串,則直接將其轉換為數字

  • 如果字串中有非數字的內容,則轉換為NaN

  • #如果字串是一個空字串或是一個全是空格的字串,則轉換為0

Number('324') // 324
Number('324abc') // NaN
Number('') // 0

②布林值轉數字:true轉成1,false轉成0

Number(true) // 1
Number(false) // 0

③undefined轉數字:轉成NaN

Number(undefined) // NaN

④null轉數字:轉成0

Number(null) // 0

⑤Number() 接受數值作為參數,此時它既能辨識負的十六進制,也能辨識0開頭的八進制,傳回值永遠是十進制值

Number(3.15);    //3.15
Number(023);     //19
Number(0x12);    //18
Number(-0x12);   //-18

(2)物件

簡單的規則是,Number方法的參數是物件時,將傳回NaN,除非是包含單一數值的陣列。

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

方式二:parseInt() & parseFloat()

這種方式專門用來對付字串,parseInt()一個字串轉換為一個整數,可以將一個字串中的有效的整數內容取出來,然後轉換為Number。 parseFloat()把一個字串轉換為一個浮點數。 parseFloat()作用和parseInt()類似,不同的是它可以得到有效的小數。

console.log(parseInt('.21'));        //NaN
console.log(parseInt("10.3"));        //10
console.log(parseFloat('.21'));      //0.21
console.log(parseFloat('.d1'));       //NaN
console.log(parseFloat("10.11.33"));  //10.11
console.log(parseFloat("4.3years"));  //4.3
console.log(parseFloat("He40.3"));    //NaN

parseInt()在沒有第二個參數時預設以十進位轉換數值,有第二個參數時,以第二個參數為基數轉換數值,如果基數有誤傳回NaN

console.log(parseInt("13"));          //13
console.log(parseInt("11",2));        //3
console.log(parseInt("17",8));        //15
console.log(parseInt("1f",16));       //31

兩者的差別:Number函數將字串轉為數值,要比parseInt函數嚴格很多。基本上,只要有一個字元無法轉成數值,整個字串就會被轉為NaN。

parseInt('42 cats') // 42
Number('42 cats') // NaN

上面程式碼中,parseInt逐一解析字符,而Number函數整體轉換字串的型別。
另外,對空字串的處理也不一樣

Number("   ");     //0   
parseInt("   ");   //NaN

3、其他的資料型別轉換為Boolean

#

它的转换规则相对简单:只有空字符串("")、null、undefined、+0、-0 和 NaN 转为布尔型是 false,其他的都是 true,空数组、空对象转换为布尔类型也是 true,甚至连false对应的布尔对象new Boolean(false)也是true

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

【推荐学习:javascript高级教程

以上是javascript如何轉資料類型的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境