搜尋
首頁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
CSS:我可以在同一DOM中使用多個ID嗎?CSS:我可以在同一DOM中使用多個ID嗎?May 14, 2025 am 12:20 AM

No,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure

HTML5的目的:創建一個更強大,更容易訪問的網絡HTML5的目的:創建一個更強大,更容易訪問的網絡May 14, 2025 am 12:18 AM

html5aimstoenhancewebcapabilities,Makeitmoredynamic,互動,可及可訪問。 1)ITSupportsMultimediaElementsLikeAnd,消除innewingtheneedtheneedtheneedforplugins.2)SemanticeLelelemeneLementelementsimproveaCceccessibility inmproveAccessibility andcoderabilitile andcoderability.3)emply.3)lighteppoperable popperappoperable -poseive weepivewebappll

HTML5的重要目標:增強網絡開發和用戶體驗HTML5的重要目標:增強網絡開發和用戶體驗May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelopmentanduserexperiencethroughsemantstructure,多媒體綜合和performanceimprovements.1)SemanticeLementLike like,和ImproVereAdiability and ImproVereAdabilityActibility.2)and tagsallowsemlessallowseamelesseamlessallowseamelesseamlesseamelesseamemelessmultimedimeDiaiaembediiaembedplugins.3)。 3)3)

HTML5:安全嗎?HTML5:安全嗎?May 14, 2025 am 12:15 AM

html5isnotinerysecure,butitsfeaturescanleadtosecurityrisksifmissusedorimproperlyimplempled.1)usethesand andboxattributeIniframestoconoconoconoContoContoContoContoContoconToconToconToconToconToconTedContDedContentContentPrenerabilnerabilityLikeClickLickLickLickjAckJackJacking.2)

與較舊的HTML版本相比,HTML5目標與較舊的HTML版本相比,HTML5目標May 14, 2025 am 12:14 AM

HTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand

CSS:使用ID選擇器不好嗎?CSS:使用ID選擇器不好嗎?May 13, 2025 am 12:14 AM

使用ID選擇器在CSS中並非固有地不好,但應謹慎使用。 1)ID選擇器適用於唯一元素或JavaScript鉤子。 2)對於一般樣式,應使用類選擇器,因為它們更靈活和可維護。通過平衡ID和類的使用,可以實現更robust和efficient的CSS架構。

HTML5:2024年的目標HTML5:2024年的目標May 13, 2025 am 12:13 AM

html5'sgoalsin2024focusonrefinement和optimization,notNewFeatures.1)增強performanceandeffipedroptimizedRendering.2)inviveAccessibilitywithRefinedwithRefinedTributesAndEllements.3)explityconcerns,尤其是withercercern.4.4)

HTML5試圖改進的主要領域是什麼?HTML5試圖改進的主要領域是什麼?May 13, 2025 am 12:12 AM

html5aimedtotoimprovewebdevelopmentInfourKeyAreas:1)多中心供應,2)語義結構,3)formcapabilities.1)offlineandstorageoptions.1)html5intoryements html5introctosements introdements and toctosements and toctosements,簡化了inifyingmediaembedingmediabbeddingingandenhangingusexperience.2)newsements.2)

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中