Javascript 類型轉換

• 介紹


• 轉換到布爾類型 (Boolean)


• 轉換到字符串類型 (String)


• 轉換到數值類型 (Number)


• 解析數值
  
  
  
  • parseFloat
  
  
  • parseInt
  
  
  • parseInt 指定基數參數


• ToInt32.


• 轉換用戶輸入
  
  
  
  • 正則表達式例子.

介紹

Javascript (ECMA Script)是一種弱類型的語言.這并不意味著它沒有數據類型,只是變量或者Javascript對象屬性不需要一個特定類型的值分配給它或者它始終使用相同的值.Javascript中的變量同樣支持自由類型轉換成為適用(或者要求)的內容以便于使用.

弱類型的Javascript不會按照程序員的愿望從實際的變量類型到所需要的數據類型轉換,例如一個非常常見的錯誤,在瀏覽器腳本中,從表單控件中獲取用戶將要輸入的一個數值類型的變量與另一個數值變量的和.因為變量類型在表單控件中是字符串類型(計時字符串序列包含一個數字)這種嘗試將會添加那個字符串到變量,即使這些值碰巧是一些數字,結果在第二個變量將會被轉換為字符串類型,在最后只會把從表單控件中得到的變量添加到第一個字符串末尾.

這個問題實際上就是"+"操作符,數字和與字符串連接問題.操作結果完全取決于被操作參數,只有在 +  操作兩者參數都為數值時才會作取和操作,否則,參數就會被自動轉換為字符串進行連接操作.

接下來討論在Javascript 工作中在類型轉換操作的變量返回情況.下表反應了在Javascript 中所有的類別,比如 123e-2 作為數值類型,對于不同的類型賦予了不同的顏色.在接下來的章節中,我們將遵循這一規則.

如果你接受這個頁面的變量類型CSS樣式設置,下表就是關于不同變量與不同顏色的搭配關系.操作符將會成為 typeof 這樣的樣式.( null 類型將會返回 "object" 當現實中 null 指定了某個對象

布爾值同樣會有高亮背景 true 或者 false.

轉換到布爾類型 (Boolean)

當表達式是 if 以及其他一些判斷情況時,類型轉換的結果將會是布爾型為了用于判斷.這些判斷包括邏輯運算比如 與 (&&), 或 (||) 以及 非 (!). 非運算轉換變量為波爾型并且如果變量是波爾型-真.那么將返回假,反之將返回真.兩次非操作將會返回等同于變量轉換成為波爾型的值.

var boolValue = !!x;

這個技巧將會后面將會用到.

另外一種可選擇的方法就是把目標作為參數傳遞給Boolean 構造函數.

var boolValue = Boolean(x);

當數值類型轉換為布爾型時,數值零將會變成假而其他數值將會變成真.除開特殊數值 NaN (Not a Number), NaN 被用于其他類型轉換到數值類型時當沒有返回一個有意義的數值時. NaN 總是返回假. 無論是無限大還是無限小或者是有限數值,只要不是零,在轉換為布爾型時總是返回 true..

字符串類型轉換規則是簡單的,字符串類型轉換到布爾型除了空字符串外都是返回真,空字符串返回假.

對于其他類型, undefined 和 null 將會返回假, Object以及function類型總是返回真.

當需要判斷某一對象是否是未定義的對象時,這是最有價值的功能.如果調用未定義的變量(undefined 或者 null) 將會產生錯誤.當這些都還不確定時(通常是網頁瀏覽器所關心的)為了避免代碼產生錯誤,需要對對象進行 if 判斷.建議把對象作為表達式,轉換為波爾型,如果返回 false 則說明對象不存在,如果返回 true 則說明對象存在.

if(document.documentElement){

scrollX = document.documentElement.scrollLeft;

}

兩次非操作可以判斷對象是否能被使用.

var hasDocEl = !!document.documentElement;

...

if(hasDocEl){

scrollX = document.documentElement.scrollLeft;

}

轉換到字符串類型 (String)

如上文所說的,其他類型轉換到字符串類型常常來自于 + 操作符,無論其中一個參數是否為數值.最簡單轉換到字符串的方法是,把目標變量連接到一個空字符串上.這種技巧的結果對應如下表.

另外一種可選擇的方法就是把目標作為參數傳遞給 String 構造函數.

var stringValue = String(x);

注意上面數值 123e-2 已經被轉換為字符串 "1.23" ,因為已經由科學計數法轉換為普通表達式了.然而,Javascript 的本質數值類型是來自于IEEE的雙精度浮點類型,這就意味著只能儲存有限的精度.數學操作結果可能只能產生近似的值,當他們轉換到字符串時,可能會收到意想不到(指壞的)的結果.所以常常需要設置特定的定制函數用以獲得可接受的結果.這種類型轉換機制難以保證正常結果.

function(){

            return;

            }

當一個對象或者函數被轉換為字符串時,他們的 toString 方法將會被調用.默認會執行 Object.prototype.toString 以及Function.prototype.toString 除 除非重寫 "toString" 方法.把一個函數轉換到字符串,返回結果并非是必須的.Function.prototype.toString 方法就能完成大部分需要,它將會返回 "host objects" 和方法(這個對象和方法取決于不同環境,比如 DOM 元素).

轉換到數值型 (Number)

轉換到數值類型,特別是由字符串轉換到數值類型,有很多通用的方法,任何數學操作方法除了加法( + )都會執行類型轉換.所以轉換字符串類型到數值類型可以使之與一個數值操作,比如減去零或者乘以一.

var numValue = stringValue - 0;

/* or */

var numValue = stringValue * 1;

/* or */

var numValue = stringValue / 1;

但是 + (取正)操作還是可以轉換字符串類型到數值類型.因為他不做任何計算操作,所以這種方法是最快的.

順便一提,相反數操作 - 同樣也會執行類型轉換,使得目標成為相反的結果.

var numValue = (+stringValue);

/* 這是不必要的,在 + 操作后已經被添加了括弧,只是為了使得代碼更容易被人理解并且使得他很清楚.特別是避免了與添加和連續操作相混淆.


比較:





var n = anyNumVar++ + +stringVar + ++anotherNumVar;

- 與 -

var n = (anyNumVar++) + (+stringVar) + (++anotherNumVar);

^^     ^              ^^

(后自增)  + (取正數)   +    (前自增)

*/

最終 + (取正)操作是最快的轉換字符串類型到數值類型的方法.傳遞給 Number 構造函數一個參數,它將會執行類型轉換并且返回一個數值類型.

var numValue = Number(stringValue);

Number構造函數是最慢的類型轉換方法,但是當速度不是所考慮的關鍵時,使用它能夠使得代碼變得很干凈.

接下來的表格展示了執行 + (取正)操作時所對應的結果.通過先前的選了,其他轉換操作同樣會返回相同的結果.(下表 Octal代表八進制,Hex代表十六進制. 譯者注)

需要考慮從的是當轉換字符串類型到數值類型時,如果需要從不是表示數值的字符串中返回結果.空字符串將會返回數值零,這對于程序可能是無害的也可能是致命傷害,但這是應該注意得到可能會發生的.在其他各項中都是遵循Javascript格式化結構的,可能對于十六進制數有些疑問,因為最后還是將他們表示成為了十進制.然而字符串想要被解析為十六進制必須被認為十六進制(以 0x 或者 0X 起頭).字符串無法被識別為 NaN.它是 isNaN 函數返回結果.字符串類型數字是一個指數格式 ("123e-2") ,不再被理解為負號.

Objects 和 functions 總是被轉換為 NaN . undefined 與 null 同樣代表沒有東西,但是只有 null 被轉換為數值零.可能是因為他們先被轉換為波爾型,然后才轉換為數值型,在上文中轉換為波爾型的結果已經很清楚了, null 轉換為波爾型將會返回 false . 它將會變為數值零. 他們幾乎都不必轉換為數值類型.他們如何進行轉換的真正意義在于為了考慮一些偶然的結果,要轉換一個字符串時,結果返回的是他們這些(或者是由于進行了一些數學計算操作才返回了這些).

解析數值

一種轉換字符串類型到數值類型的可以選擇方法是使用全局函數,它是一個已經設計好的解析字符串返回數值的函數. parseFloat 函數接受一個字符串參數,返回一個單精度數值.這是一種快速的轉換非字符串參數的方法.

字符解析函數獲取每一個字符直到遇到不屬于數值的字符,然后返回它已獲取的數值.這個特性常常被用于開發中.比如一個代表CSS長度的字符串,它的值是 "34.5em" parseFloat 函數不會理會 "em" 因為這些字符無法與之前的數字產生有效的值.它將會返回 34.5.這個CSS字符串中的數字部分.

parseFloat

對于 parseFloat 解析空字符串將會返回 NaN ,是因為空字符串不屬于數字表達式.指數可以被解析,由0起頭的八進制不會阻止字符串解析為十進制數.十六進制數卻因為 "x" 無法作為數字被解析而停止解析而返回一個零.

非字符串類型轉換成為快速轉換,作為一個字符串傳遞給 parseFloat .當那些類型轉換作為字符串時不在是正常的結果,它的解析結果是 NaN. Objects 和 functions 可能有自定義 toString 方法返回字符串將會被解析成為數值,這是一個特殊的要求.

parseInt

parseInt 函數的工作方式和 parseFloat 有些相似.不同之處在于它是嘗試把字符串轉換為整型數值,只能辨認幾個少數作為數字的符號.

parseInt 函數偶爾被用作轉換單精度浮點數值類型為整型.由于這種轉換首先要從字符串類型轉換到單精度數值類型所以是不太適用的,另外,由于它會產生一些錯誤,所以變得非常沒有效率,比如 2e-200 這個科學計數法的數值正確的返回因該是零,但是 parseInt 返回 2 .并且由于是Javascript 格式化,數值常常返回的是一些近似值.比如 1/2 + 1/3 + 1/6 = 0.9999999999999999 ,這個表達式的結果的近似值應該是 1 ,但 parseInt 竟會返回 0.

可以取得近似值的 Math.round, Math.ceil 和 Math.floor 都比較合適這個工作,為了取得結果,表達式將會被作為32位有符號整型,這個規則同樣適用于下面這些情況.(譯者注 Math.round 函數執行的是常見的四舍五入,0.4以及一下將會被忽略,0.5以及以上將會被加1. Math.ceil 函數在只要有小數的情況是就加1 . Math.floor 函數則無論小數大小都會被忽略.由這些函數的定義可知 parseInt 方法對于小數采取的是同 Math.floor 一樣的處理方式)

在結果中我們可以很明顯的看到函數執行時先把參數轉換為字符串型然后才進行解析.注意那個 123e-2 值,它就相當于數值 1.23 ,執行類型轉換時轉換到字符串類型 "1.23" ,所以這項在上表中看起來很奇怪,但是這是正確的.

進行格式化到整型中當字符串是八進制或者十六進制數時, parseInt 函數可以以按符合Javascript代碼規則的方式解析他們,甚至當他們帶有負號時.

As parseInt type-converts its non-string arguments to strings it always produces the same results for boolean, null, undefined, object and function arguments as parseFloat (assuming objects and functions do not have custom toString methods).
parseInt 和 parseFloat 一樣在接受非字符串的其他類型參數時,都會產生相同的結果.比如 boolean, null, undefined, object and function (假定這些 objectes 和 functions 都沒有自定義 toString 方法).

parseInt 指定基數參數

這是一個少有讓人滿意的功能, parseInt 允許我們自定義接受參數的進制格式.比如以0開頭的字符串很少會被用于八進制格式化(特別是在用戶輸入中). 為了處理這類問題, parseInt 接受第二個參數,基數.它可以指出第一個字符串參數要被如何解析.特別指出,第二個參數如果是 10 , parseInt 函數將解析第一參數字符串只能為十進制.

八進制字符串現在已經被解析為 10 了,十六進制字符串則變成了 0 ,因為解析步驟停止在了 "x" 字符上.

Number bases 2 to 36 can be used with parseInt. The following is base 16.
parseInt 第二參數的合法值為 2 到 36.接下來是基于16進制的.

十六進制 0x 可以被識別出,在基于十六進制數時.

最后,嘗試下基于3進制.

結果很明顯,數字 8 輸出 NaN 是因為 "8" 字符在三進制數中無法被解析,這和下面一行中空字符串參數產生了相同的結果.

ToInt32

ToInt32 是一個內置函數,雖然很有用,但是無法像 parseInt 一樣被直接調用.用它轉換Javascript變量到數值有一些不同尋常的方式.但是它能在一些有限的情況下被使用.位操作,比如按位OR(|)和 按位AND (&) 操作數值時,在使用它們操作時能被轉換為數值類型.但是他們只工作在32位有符號的整形中,所以我們可以通過調用內置函數 ToInt32 返回已轉換的32位有符號整形變量(進行類型轉換).

結果就像是 parseInt 函數調用后,只是結果被限定為32位,因此都是數值,而沒有 NaN 或者 Infinity.

就算是用空值進行操作,結果返回的也是一個數值,使用一個位運算不會印象結果,卻可以調用 ToInt32 函數.下表表示經過按位OR 0 運算后的結果.

NaN 和 ±Infinity 變成了0, 浮點數被縮短成了整形.

ToInt32 把字符串類型變量將原被應該被轉換為 NaN 的結果變成了 0.

操作后甚至 undefined, objects 和 functions 都被轉換為 0,注意,布爾值 true 被轉換成了數值 1.

轉換用戶輸入

大多數的結構都是為了獲取用戶輸入. <input type="text"> 和 prompt .例如在表單中他們的結果是字符串類型.即使期望用戶只輸入數字,他們仍然可能輸入仍和東西(至少他們可能會輸入一個制表符).如果想要把字符串類型轉換為數值類型,上文的最后一種方法是最合適的.但是有時仍然會有一些錯誤的輸入難以發現和控制.

把字符串類型轉換為數值類型一種更有利的方法是使用正則表達式(Regular Expression),使得字符串確保可以被正確的格式化.它也可以為剔除一些字符串變量而服務.

正則表達式例子

/^\d+$/                 //所有數字

/^\s*[-+]?\d+\s*$/      //連續的數字

/^\d{1,5}$/             //由1到5組成的數字

/^\d+\.\d\d$/           //Money

/^\d+(\.\d{2})$/        //Money

/^\d{1,3}(,\d\d\d)*\.\d\d$/  //帶逗號的 money - 12,432.57

// 可帶逗號和不帶逗號的 money - 12,432.57 or 12432.57

/^\d{1,3}(,\d\d\d)*\.\d\d$|^\d+\.\d\d$/