js之類型轉換

来源:https://www.cnblogs.com/freefy/archive/2018/08/08/9440214.html
-Advertisement-
Play Games

一.顯式類型轉換 1.Number(mix) 把其他類型的數據轉換成數字類型的數據 2.parseInt(string,radix) 將字元串轉換成整型類型數字(不四捨五入)(截斷數字) 當參數string裡面既包括數字字元串又包括其他字元串的時候，它會將看到其他字元串就停止了，不會繼續轉換後面的數 ...


一.顯式類型轉換

1.Number(mix)-----把其他類型的數據轉換成數字類型的數據

//string類型-
var num= Number('123');
console.log(typeof(num)+':'+num); // number:123
var num= Number('-123');
console.log(typeof(num)+':'+num); // number:-123
var num = Number('abc');
console.log(typeof(num)+':'+num); // number:NaN
var num = Number('123abc');
console.log(typeof(num)+':'+num); // number:NaN
//boolean類型
num = Number(true);//false為0
console.log(typeof(num)+':'+num); // number:1
//undefined類型
num = Number(undefined)
console.log(typeof(num)+':'+num); // number:NaN
//對象
num = Number(null);
console.log(typeof(num)+':'+num); // number:0
num =  Number([]);;//空數組
console.log(typeof(num)+':'+num); // number:0
num=Number({});//空對象
console.log(typeof(num)+':'+num); // number:NaN
num = Number([1,2]);//非空數組
console.log(typeof(num)+':'+num); // number:NaN
//註:如果參數是 Date 對象，Number() 返回從 1970 年 1 月 1 日至今的毫秒數。
var num = Number(new Date());
console.log(typeof(num)+':'+num); // number:...

 2.parseInt(string,radix)---將字元串轉換成整型類型數字(不四捨五入)(截斷數字)

當參數string裡面既包括數字字元串又包括其他字元串的時候，它會將看到其他字元串就停止了，不會繼續轉換後面的數字型字元串了。

parseInt('123abc345') // 123
parseInt('abc123') // NaN
parseInt('123') // 123
parseInt('abc') // NaN
//非字元串(非數字)轉換為NaN
parseInt(true) // NaN
parseInt(null);//NaN
parseInt(undefined)//NaN
parseInt([]);//NaN
parseInt({});//NaN

radix基底是可以選擇的參數,radix的範圍是(2-36);

但radix為空時,就是將第一個參數轉換為數字;

當radix不為空時,這個函數可以用來當做進位轉換,第二個參數的作用是將第一個參數的轉換為數字後並當成幾進位的數字轉換為十進位,第二個參數

var num = '13';
console.log(parseInt(num,16));//19,將十六進位的13轉換為10進位的數字 
var num = '13fg';
console.log(parseInt(num,16));//319,將十六進位的13f轉換為10進位的數字 
var num = '3';
console.log(parseInt(num,2));//NaN;將2進位的3轉換為10進位的數字

註:var num = 123.2353;console.log(num.toFixed(2));//123.24---保留兩位小數,四捨五入

3.parseFloat(mix)---這個方法和parseInt方法類似，是將字元串轉換成浮點類型的數字;

同樣是碰到第一個非數字型字元停止，但是由於浮點型數據有小數點，所以它會識別第一個小數點以及後面的數字，但是第二個小數點就無法識別了。

parseFloat('123.2.3') // 123.2
parseFloat('123.2abc') // 123.2
parseFloat('123.abc') // 123
parseFloat('123.234aa')//123.234'

 4.toString(radix);這個方法和前面的都一點不同，它是對象上的方法，任何數據類型都可以使用，轉換成字元串類型。

同樣radix基底是可選參數，當為空的時候，僅僅代表將數據轉化成字元串。

var demo = 100;
typeof demo.toString(); // string 100 把100轉換為數字串
//註意,不可以寫成100.toString(); .會被當成浮點數而導致報錯
typeof true.toString() // string true
//undefiend和null沒有toString方法
var demo = undefined;//null也報錯
var num = demo.toString();
console.log(typeof(num)+':'+num);//報錯
//數組
var arr=[1,2,3];
arr.toString();//"1,2,3";
var arr = [];
arr.toString();//"";
//對象
var obj = {};
obj.toString();//"[object Object]"
var obj = {name:'wang'};
obj.toString();//"[object Object]"
//擴展---判斷數據是數組還是對象的有效方法
var demo = {name:'wang'};//---[object Object]
//var demo = [1,2,3,4,5];---[object Array]
console.log(Object.prototype.toString.call(demo));

 radix不為空;表示以十進位為基底,轉換為radix目標進位的數字型字元串

var demo = 10;
demo.toString(16) // A
問題:如何將一個二進位的數轉換為16進位 
//先從二進位轉換到10進位,在轉換到16進位
var num = 10101010;
var test = parseInt(num,2);//將num當成二進位轉換為10進位
var tar = test.toString(16);//將十進位的test轉換為16進位
console.log(tar);//aa

5.String(mix)---把任何類型轉換成字元串類型。

var demo = 100.23;
console.log(String(demo));//string類型的 100.23
var demo = true;
console.log(String(demo));//string類型的 true
var demo = undefined;
console.log(String(demo));//string類型的 undefined
var demo = null;
console.log(String(demo));//string類型的 null
var demo = [];
console.log(String(demo));//空字元串
var demo ={};
console.log(String(demo));//string類型的 [object Object]

 6.Boolean---轉換為布爾值false或者true

0,undefined,null,''(空串),NaN---轉換為false,其他為true

Boolean(0); // false
Boolean(undefined); // false
Boolean(null); // false
Boolean(''); // false
Boolean(NaN); // false
var demo;
console.log(Boolean(demo));//false
Boolean({})//true
Boolean([])//true

 二.隱式類型轉換---內部隱式調用了顯式的方法

1.isNaN()----檢測數據是不是非數類型。

中間隱含了一個隱式轉換，它會先將你傳的參數調用一下Number方法之後，再看看結果是不是NaN，這個方法可以檢測NaN本身。

isNaN(NaN); // true
isNaN('abc'); // true  Number('abc')= NaN
isNaN('123'); // false
isNaN(null);//false    Number(null) = 0
isNaN(undefined);//true Number(undefined) =NaN

 2.++,  -- ,  +,-(一元正負),    -,*,/,%(二元)

運算之前,先把變數調用Number方法,轉換為數字,再運算

var a = '124';
var b = a++;
console.log(typeof(b)+':'+b);//number:124
var a = +'abc';  //+或-
console.log(a); //NaN
var a= 'a' *1;  //NaN
var b = '123'*1; //123

 3.+(二元操作符)當加號兩側有一個是字元串,就調用String方法,把兩個都變成字元串

var a = '1'+ 1;
console.log(typeof(a)+':'+a);//string:11

4.&& ,||  ,!-----運算之前,先把表達式調用Boolean方法,轉換為布爾值,再運算

&&,||返回的結果還是本身表達式的結果。

var a = 'abc';
console.log(!a); // false
var c='aa' && 22;
console.log(c);//22

5.<,>,<=,>=----有數字進行比較的(不論在操作符左邊還是右邊),就會隱式轉換為數字

var a= 10 > '2';
console.log(typeof(a)+':'+a);//boolean:true
var a= '10' > 2;
console.log(typeof(a)+':'+a);//boolean:true
var a= '10'>'2';//沒有類型轉換,比的是ASCII
console.log(typeof(a)+':'+a);//boolean:false

6.==   != (也有隱式轉換)

var a= '1'==1;
console.log(typeof(a)+':'+a);//boolean:true
var a= '1'== true;
console.log(typeof(a)+':'+a);//boolean:true

註意:NaN==NaN//false,NaN是唯一一個不等於自己的

var a = 3>2>1;//先比較3>2--true;true>1--1>1--false
console.log(a);//false

 註意:

undefined ==0;//false
undefined <0;//false
undefined >0;//false
undefined>=0;//false
undefined<=0;//false
null==0;//false
null>0;//false
null<0;//false
null>=0;//true
null<=0;//true
null==undefined;//true

 三.不發生類型轉換: ===,!==

'123' === 123; // false;
true === 'true'; // false
1 !== '1'; // true
1 !== 1; // false

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • BFC塊級格式化上下文
    規則 BFC觸發原理 作用 如果裡面的兩個div為浮動，那麼設置 .layout {overflow: hidden} 2. 防止margin重疊 總結： BFC通俗地說：就是一個容器，裡外不相互影響，記住：清除浮動的時候，如果使用 overflow： hidden，是存在缺點的，如果超過了範圍，那 ...
  • 寫一個可以在可口可樂上寫日記的小程式
    1.技術棧 1.小程式； 2.使用了有贊提供的UI庫zan ui 3.express+mongoose+nginx； 2.功能介紹 1.假設有一天你在廣東的一間便利店裡面品嘗一瓶可口可樂，這時，你拿出了這個小程式“商品手賬”掃描這瓶可樂的商品條碼，然後寫下一段留言。 2.時間一晃就到了幾年後，這時你 ...
  • 【原】無腦操作：HTML5 + CSS + JavaScript實現比賽排程
    1、背景：朋友請幫忙做一個比賽排程軟體 2、需求： ① 比賽人數未知，可以通過文本文件讀取參賽人員名稱； ② 對參賽人員隨機分組，一組兩人，兩兩PK，如果是奇數人數，某一個參賽人員成為幸運兒自動晉級； ③ 比賽線下進行，比賽結束後，可以線上選擇每組中晉級人員； ④ 晉級人員進行下一輪比賽分組，依此類 ...
  • JS原型鏈
    原型鏈 繼承 1 構造函數 2 原型鏈 3 組合繼承 把公共數據放在Parent中，這樣的話就不會公用一個引用類型 4 優化組合繼承 判斷原型和實例的關係 ...
  • 自己做的一個登陸註冊留言板的界面未實現功能求指點 待更。。。。。。
    MAIN結構 //// <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Main" %> <!DOCTYPE html><html xmlns="http://www.w3.org ...
  • 小程式在父組件執行子組件方法，可適用於下拉刷新上拉載入之後執行子組件方法
    當父組件引用了子組件的時候，會遇到父組件執行子組件的方法，比如下拉刷新上拉載入等事件只有在頁面中才能檢測到，但是獲取數據的方法在子組件，這時就可以執行子組件方法。 思路很簡單，類似於vue中給子組件加ref執行子組件方法道理一樣，這裡是給子組件加一個 屬性： id="子組件名稱",比如： 然後在父組 ...
  • 在centos7中安裝redis，並通過node.js操作redis
    引言 最近在學習node.js 連接redis的模塊，所以嘗試了一下在虛擬機中安裝cent OS7，並安裝redis，並使用node.js 操作redis。所以順便做個筆記。 如有不對的地方，歡迎大家指正！ 1、cent OS7 下使用redis 1.1、配置編譯環境： 1.2、下載源碼： 1.3、 ...
  • 深入出不來nodejs源碼-events模塊
    這一節內容超級簡單，純JS，就當給自己放個假了，V8引擎和node的C++代碼看得有點腦闊疼。 學過DOM的應該都知道一個API，叫addeventlistener，即事件綁定。這個東西貫穿了整個JS的學習過程，無論是剛開始的自己獲取DOM手動綁，還是後期vue的直接@click，所有的交互都離不開 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類