整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          第9節 Javascript數據類型轉換-零點程序員

          第9節 Javascript數據類型轉換-零點程序員-王唯

          avaScript中的數據類型非常靈活;將一種類型轉為另外一種數據類型,如:將string類型的1轉換為數字類型的1;

          為什么要進行類型轉換:因為數據之間的運算需要是同類型的運算,如果不同類型進行運算,需要將其轉換為同一種類型后再進行運算。

          類型轉換分為兩種:強制類型轉換和自動類型轉換;

          1)自動轉換:

          在運行過程中根據運算的語意環境,會自動進行類型轉換;

          var a="2",b="1";
          console.log(a-b);
          b=true;
          console.log(a-b);

          注:最經典的是用在if語句中的條件中:

          var car=new Object();
          if(car){
              console.log("汽車");
          }

          數據類型轉換

          2)強制(顯式)類型轉換:

          盡管JavaScript可以自動進行類型轉換,但有時仍需要顯示轉換,或者有時為了使代碼變得更加清晰易讀。

          使用String()、Number()、Boolean()等函數強制轉換;


          a)轉換為數值:

          有3個函數可以把非數值轉換為數值:Number()、parseInt()、parseFloat();Number()可以用于任何類型,而另外兩個則專門用于把字符串轉換成數值;這三個函數對于同樣的輸入會有不同的返回結果;

          Number()函數:轉換規則如下:

          如果是Boolean值,true和false分別被轉換為1和0;

          如果是數字值,會直接返回該數值;

          如果是undefined,返回NaN;

          如果是null,返回0;

          如果是字符串,則遵循以下規則:如果字符串中只包含數字(包括前面的正號或負號),則將其轉換為十進制數,如“123”會變成123,而“011“會變成11(注:前導零忽略了);如果字符串中包含有效的浮點格式,如”1.1“,會被轉換為浮點數值(同樣,也忽略前導零);如果字符串包含有效的十六進制格式 ,如”0xf“,則被轉換為相同大小的十進制數;會忽略字符串前面的空格;如果字符串是空的(不包含任何字符),則轉換為0;如果字符串中包含除上述格式之外的字符,則被轉換為NaN;

          如果是對象,則調用對象的valueOf()方法,然后依照前面的規則轉換返回的值;

          一元操作符(+、-)的操作與Number()函數相同,會將操作數轉換為數字;

          var x="w";
          console.log(typeof +x);  // 等價于 x - 0

          parseInt()和parseFloat()函數:

          由于Number()函數在轉換字符串時比較復雜而且不夠合理,并且只能基于十進制數進行轉換,且不能出現非法的尾隨字符,因此在處理整數的時候更常用的是parseInt()和parseFloat()函數;

          二者是全局函數,不從屬于任何對象的方法;

          其在轉換時,更多的是看其是否符合數值模式;它會忽略字符串前面的空格,直到找到第一個非空字符;如果第一個字符不是數字字符或者負號,其會返回NaN,即parseInt()轉換空字符串時會返回NaN(Number不會);如果第一個字符是數字,parseInt()會繼續解析第二個字符,直到解析完后續所有字符或遇到到一個非數字字符;如:

          console.log(parseInt("123red"));  // 123
          console.log(parseInt("    8a"));  // 8
          console.log(parseInt(22.5));  // 22
          console.log(parseInt("wang"));  // NaN
          console.log(parseInt(""));  // NaN

          parseInt()可以識別出十六進制數,識別不了八進制,在解析八進制時,去除零轉換為十進制;

          console.log(parseInt("0xAF"));  // 10*16 + 15=175
          console.log(parseInt("  0xAFwangwei"));  // 175
          console.log(parseInt("070"));  // 70

          parseInt()在識別八進制時,第3版可以識別,但第5版識別不了,為了解決這個問題,可以為parseInt()指定第二個參數:轉換基數,如:

          console.log(parseInt("0xAF",16));  // 175
          console.log(parseInt("070",8));  // 56

          在指定了進制后,字符串可以不帶前面的“0x“或“0”,如:

          console.log(parseInt("AF",16));  // 175
          console.log(parseInt("70",8));  // 56

          注:當然除了八進制,十六進制,還可以指定其他進制;如:

          console.log(parseInt("11",2));  // 1*2 + 1=3
          console.log(parseInt("ff",16));  // 15 * 16 + 15=255
          console.log(parseInt("zz",36));  // 35 * 36 + 35=1295
          console.log(parseInt("077",8));  // 7 * 8 + 7=63
          console.log(parseInt("077",10));  // 7 * 10 + 7=77

          與parseInt()類似,parseFloat()也是如此,但如果字符串里有兩個小數點,第二個小數點就是無效的了。

          console.log(parseFloat("22.23.5"));  // 22.23

          parseFloat()只能解析十進制數,會忽略字符串的前導零,即十六進制數會被始終轉換成0;

          如果字符串包含的是一個可解析為整數的值,或者小數點后是零,parseFloat()會返回整數;

          console.log(parseFloat("123abc"));  // 123
          console.log(parseFloat("123.56abc"));  // 123.56
          console.log(parseFloat("0xA"));  // 0
          console.log(parseFloat("22.5"));  // 22.5
          console.log(parseFloat("0909.5"));  // 909.5
          console.log(parseFloat("3.125e6"));   // 3125000

          b) 轉換為字符串:

          要把一個值轉換為一個字符串有兩種方式;第一種是使用幾乎每個值都有的toString()方法;該方法會返回相應值的字符串;

          var age=18;
          var ageString=age.toString();
          var found=true;
          console.log(found);  // "true" ,實際上調用了:found.toString()或found.valueof();

          注:數值、布爾值、對象和字符串值都有toString()方法,但null和undefined值沒有這個方法;

          可以為toString()指定一個可選的基數(radix)的參數;默認情況下,toString()方法以十進制格式返回數值的字符串表示;通過設置基數,可以輸出其他進制表示的字符串;如:

          var age=18;
          console.log(age.toString(2));  // 10010
          console.log(age.toString(8));  // 22
          console.log(age.toString(16));  // 12

          第二種方法:使用String(),這個函數可以將任何類型的值轉換為字符串,包括null或undefined;

          轉換規則:如果值有toString()方法,則調用該方法(沒有參數);如果值是null,則返回null;如果是undefined,則返回undefined;

          console.log(String(null));  // null
          console.log(String(undefined));  // undefined

          如果要把某個值轉換為字符串,可以使用加號操作符把它與一個空字符串拼接。

          var str=10 + "";
          console.log(typeof str);  // string

          c)轉換為Boolean:

          可以使用轉型函數Boolean(),如:var message="zero"; alert(Boolean(message));

          使用Boolean(),會返回一個Boolean一個值,但返回的值是true還是false,取決于要轉換值的數據類型及其實際值;

          轉換為Boolean類型值

          這些轉換規則一般用在控制語句(如if語句)自動執行相應的Boolean轉換,如:

          var msg="zero";
          if(msg){
              console.log(msg);
          }

          一元“!”運算符也將其操作數轉換為布爾值并取反,這是在代碼中進行這種類型轉換的慣用用法:

          var x="w";
          console.log(!!x);  // 等價于 Boolean(x)

          檢測類型:

          typeof操作符:

          ECMAScript中的數據是松散類型的,因此需要有一種方法來檢測給定的變量的數據類型:typeof,其會返回以下字符串:

          undefined值未定義、boolean布爾值、string字符串、number數值、object對象或null、function函數;

          var msg="zeronetwork";
          console.log(typeof msg);
          console.log(typeof(msg));
          console.log(typeof 18);

          說明:typeof是一個操作而非不是一個函數,因此可以不使用括號;

          注:有時typeof會返回一個令人迷惑但技術上卻正確的值,如:typeof null,會返回object,因為特殊值null被認為是一個空的對象引用;

          注:從技術角度來說,函數在ECMAScript中是對象,不是一種數據類型;然而,函數也確實有一些特殊的屬性,因此通過typeof操作符來區分函數和其他對象是有必要的。

          instanceof操作符:

          雖然typeof是個非常有用的工具,但是在檢測引用類型的值時,用處不大;有時,想確認一個對象具體是什么類型的對象,就需要使用instanceof操作符了;

          語法:result=variable instanceof constructor

          如果變量是引用類型的實例,其會返回true,如:

          var num=1;
          console.log(num instanceof Number);
          var person=new Object();
          console.log(person instanceof Object);
          var color=new Array();
          alconsole.log(color instanceof Array);
          var pattern=new RegExp();
          console.log(pattern instanceof RegExp);

          說明:根據規定,所有引用類型的值都是Object的實例;因此,在檢測一個引用類型值和Object構造函數時,instanceof操作符始終會返回true;

          使用instanceof操作符在檢測基本類型的值,會返回false,因為基本類型不是對象。


          Web前端開發之Javascript-零點程序員-王唯

          些你不知道的Javascript隱式類型轉換

          JavaScript是一種動態類型、弱類型語言,它在處理字符和字符串時表現出了獨特的靈活性和復雜性。在本文中,我們將從探討JavaScript中的一段通過隱式類型轉換的看似瘋狂但有效的代碼片段到熟知Javascript中的隱式類型轉換規則


          瘋狂仍有效的代碼

          JavaScript的靈活性和隱式類型轉換能力使得一些看似不合理的代碼片段實際上是有效的。一個典型的例子就是以下代碼:

          // a
          (![]+[])[+!![]]==="a"
          

          轉換規則

          符號運算規則[]空數組,在JavaScript中被視為真值(truthy)。盡管它是一個空數組,但它的存在本身就表示為真。!邏輯非(NOT)運算符,將其操作數的布爾值取反。結果是一個布爾值。!!雙重邏輯非操作,將其操作數轉換為布爾值。這是一個常見的技巧,用于將任何值轉換為布爾值。+加號運算符不僅用于數值相加,當其一個操作數是字符串或可以轉換為字符串時,JavaScript會將另一個操作數也轉換為字符串,然后進行字符串連接操作。

          轉換步驟

          符號運算過程運算結果![]空數組 [] 在JavaScript中被視為真值(truthy)。對其進行邏輯非操作 !,結果是 false(false+[])[+!![]]![] + []![] 的結果是 false,與空數組 [] 進行字符串連接操作,結果是 "false"("false")[+!![]]!![]布爾值 true("false")[+true]+!![]將布爾值 true 轉換為數值 1("false")[1](![]+[])[+!![]]("false")[1] 獲取字符串 "false" 的第 1 個字符(從 0 開始計數),結果是字符 "a""a"

          進一步探索

          通過這個例子,我們可以看到JavaScript的靈活性和強大的隱式類型轉換能力。盡管這些代碼片段看起來很瘋狂,但它們確實是有效的,并且展示了JavaScript獨特的特性和魅力。通過使用這六個字符(!, (, ), [, ], +),我們可以構建出各種各樣的代碼表達式。大家可以使用這個網站 JSF u ck 來自行嘗試更多的組合和表達式。比如:

          JSF u ck中,用了7455個字符來構建'z', 我們可以看出,逐個解析對于開發人員來說是十分困難的,它的可讀性很差且難以讓人理解,所以我們在日常開發中都不會像這樣來寫代碼,但是我們為了增加開發效率和避免一些隱式類型錯誤問題,我們仍需要去熟悉常見的隱式類型轉換,以下是一些隱式類型轉換的規則。

          類型轉換規則

          基礎的隱式類型轉換

          算術運算符

          在算術運算符中,只有字符串與運算符‘+'一起進行轉換時,會轉換成字符串,其他情形下均轉換成數字

          // +運算符和字符串一起,均轉換成字符串
          console.log(1 + '1')    // '11' 
          // 其他
          console.log(1 + true)      // 2 : number + boolean
          console.log(true + false)  // 1 : boolean + boolean
          console.log(1 - false)     // 1 : number - boolean
          console.log(true - false)  // 1 : boolean - boolean
          console.log(-1 * '1')      // -1 : number * string
          console.log(-1 / true)     // -1 : number / boolean
          console.log(2 ** ('1' + 0))// 1024 : number ** (string + number)
          console.log(100 % ('1' + 0))// 0 : number % (string + number)
          

          邏輯運算符

          邏輯運算符中,運算符非(|)會轉換成布爾值,而運算符或(||) 和 與(&&)會進行真/假值判斷, 或(||)第一個為假輸出第二個值,第一個為真輸出第一個值。與(&&)第一個為真輸出第二個值,第一個為假輸出第一個值

          // 非(!)
          console.log(!true)        //false
          console.log(![])          // false
          console.log(!!{})         // true !{} 會調用{}的valueOf 和 toString, 轉換成[object object]
          
          // 或(||) 和 與(&&)
          console.log(0 || 1)       // 1
          console.log(1 || 0)       // 1
          console.log(0 && 1)       // 0
          console.log(1 && 0)       // 0
          

          位運算符

          位運算符 與(&),或(|),異或(*),取反(~),左移(<<),右移(>>)均會進行二進制值的轉換

          console.log(2 & 3)        // 2 (010 & 011=> 010)
          console.log(2 | 3)        // 3 (010 | 011=> 011)
          console.log(2 ^ 3)        // 1 (010 ^ 011=> 001)
          console.log(~2)           // -3 (00000010=>11111101=> 11111100(-1取反碼)=> 00000011(按位取反)=> -3)
          console.log(2 << 1)       // 4 (010 << 1=> 100=> 4)
          console.log(4 >> 1)       // 2 (100 >> 1=> 010=> 2)
          

          復雜的隱式類型轉換

          對象轉換為基本類型

          在javaScript中,對象在需要轉換為基本類型時,會調它們的tostring()或者valueof()方法。

          操作數類型運算符轉換規則示例object + string+調用 valueOf() 和 toString() 方法({}) + '' 結果為 "[object Object]"object - number-調用 valueOf() 方法轉換為數字({valueOf() { return 3; }}) - 1 結果為 2

          let obj={
            toString() {
              return '42';
            },
            valueOf() {
              return 10;
            }
          };
          
          console.log(obj + 10); // 輸出 52
          console.log(String(obj)); // 輸出 '42'
          

          解析:當對象參與加法運算時,JavaScript會調用valueOf() 方法獲取基本類型值。在字符串上下文中,則會調用toString()方法。

          Symbol 類型的隱式轉換

          Symbol 是 ES6 引入的一種新的原始數據類型,用于創建唯一的標識符。Symbol 類型的值在轉換為字符串或數字時,會拋出錯誤

          let sym=Symbol('example');
          
          try {
            console.log('symbol: ' + sym); // 拋出 TypeError
          } catch (e) {
            console.log(e); // TypeError: Cannot convert a Symbol value to a string
          }
          
          try {
            console.log(sym + 10); // 拋出 TypeError
          } catch (e) {
            console.log(e); // TypeError: Cannot convert a Symbol value to a number
          }
          
          try {
            console.log(String(sym));   // 'Symbol('example')'
          } catch(e) {
            console.log(e);
          }
          

          解析:Symbol 類型的值在隱式轉換為字符串或數字時會拋出錯誤,必須顯式轉換

          幾個隱式類型轉換陷阱

          數組與數字運算

          console.log([] + 1); // 輸出 '1'
          console.log([1] + 1); // 輸出 '11'
          console.log([1,2] + 1); // 輸出 '1,21'
          

          解析:空數組轉換為字符串為 '',與數字 1 相加結果為 '1'。數組 [1] 轉換為字符串為 '1',數組 [1,2] 轉換為 '1,2',與數字 1 相加結果為 '1,21'

          空對象與布爾運算

          console.log({}==true); // 輸出 false
          console.log({}==false); // 輸出 false
          console.log([]==true); // 輸出 false
          console.log([]==false); // 輸出 true
          

          解析:與boolean值比較,兩邊都轉換成數字, 這時{}會轉換成[object object]最后轉數字成NaN。空數組 [] 轉換為布爾值為 true,但與 false 比較時,會首先轉換為數字 0,所以結果為 true

          undefined 和 null

          console.log(undefined + 1)    // NaN
          console.log(null + 1)         // 1
          console.log(undefined==null)// true
          

          解析:undefined 沒有數值形式,所以當undefined + 1時,嘗試將undefined轉換為數字失敗,結果為NaN. Null 在算術運算過程中,會被當作0,所以結果為1。當用'=='進行比較時,javascript會將它們視為相等,因為他們都是"無"或者"空"的特殊值。

          復雜應用場景中的隱式類型轉換

          JSON 與對象轉換

          在復雜的條件語句中,隱式類型轉換也可能導致意外結果

          let jsonStr='{"a": 1, "b": "2"}';
          let obj=JSON.parse(jsonStr);
          
          console.log(obj.a + obj.b); // 輸出 '12'
          

          解析:JSON.parse 將 JSON 字符串轉換為對象,但對象屬性 b 仍為字符串,與數字屬性 a 相加時進行字符串拼接。

          類型轉換與條件語句

          在復雜的條件語句中,隱式類型轉換也可能導致意外結果

          let x=0;
          let y='0';
          
          if (x==y) {
            console.log('x==y'); // 會輸出
          }
          
          if (x===y) {
            console.log('x===y'); // 不會輸出
          }
          
          if (x || y) {
            console.log('x || y'); // 會輸出
          }
          

          解析:在 x==y 中,JavaScript 會將 y 轉換為數字 0,結果為 true。在 x || y 中,x 為假值(false),但 y 為真值(非空字符串 '0'),結果為 '0'

          總結

          以上內容展示了JavaScript中隱式類型轉換的強大與復雜性,以及如何利用這些特性構建出看似瘋狂但有效的代碼片段。了解這些規則和陷阱對于編寫健壯的JavaScript代碼至關重要。


          作者:唐亞婷

          來源-微信公眾號:大轉轉FE

          出處:https://mp.weixin.qq.com/s/5jPYIRE0UjXqZSq5ikglrA

          用Ueditor 上傳視頻成功了 預覽也可以 但在再次編輯回顯內容 準備修改時 發現 視頻的小logo 不見了,用查看html發現src根本就沒有值 鏈接在保存的過程丟失了

          工具/原料

          • myeclipse
          • ueditor

          方法/步驟

          1. 這個問題困擾很久 ,上網查找 發現也有遇到這一同一問題
          2. ueditor 上傳成功 預覽成功 查看html 代碼如下:
          3. <p><video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="http://***/ueditor/jsp/upload/video/20170119/1484791682515095947.mp4" data-setup="{}"></video></p>
          4. 保存完 返回 回顯再編輯時 就會出現:
          5. <p><video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src data-setup="{}"></video></p>
          6. 可惜 下面沒有多少可解決問題的好方法


          1. 卡住了,只好乖乖的再去查看API 。
          2. 終于在 getContent()的方法中找到了點點蹤跡;
          3. getContent()獲取到的是經過編輯器內置的過濾規則進行過濾后得到的內容。
          4. 因為說明 在獲取時,存在一個過濾的過程。 關鍵在于這個過濾!


          1. 查看資料得知 在ueditor.config.js 里存在白名單的設置。白名單里過濾掉了各種標簽的屬性。在重新編輯上傳視頻時,ueditor 會自動的將video轉化為img


          1. 設置白名單。在配置文件ueditor.config.js 中,有默認過濾規則相關配置項目 找到whitList的位置(365行左右)。配置video和img過濾的標簽名單。
          2. 其他的過濾項目可以根據自己的需求添加修改。設置完后,清除瀏覽器緩存 ,查看效果。


          1. 如果設置白名單的方法沒有效果,可以簡單粗暴的將默認過濾機制去掉,在ueditor.all.js中,找到函數UE.plugins['defaultfilter']=function () {...}(plugin 編輯器默認的過濾轉換機制 位于9967行左右)。
          2. 第一種 在函數里添加return; 所有過濾機制失效。
          3. 第二種 將case 'img' 部分的代碼注釋掉,不過濾img標簽(再編輯時ueditor 會自動的將video轉化為img)的情況。
          4. 如果引用的是 ueditor.all.min.js,需要對此做同樣的修改。




          1. 設置完后,清除瀏覽器緩存 ,查看效果。打開html,路徑存在!OK



          1. END

          注意事項

          • 參考資料中放了些鏈接,希望對大家有用!不足之處請多多指教!

          主站蜘蛛池模板: 亚洲片一区二区三区| 视频精品一区二区三区| 亚洲日本中文字幕一区二区三区| 亚洲AV美女一区二区三区 | 日本免费一区二区三区四区五六区| 中文乱码人妻系列一区二区| 亚洲Aⅴ无码一区二区二三区软件| 久久精品午夜一区二区福利 | 成人精品一区二区三区不卡免费看 | 中文字幕无码不卡一区二区三区 | 日本一区二区三区免费高清| 亚洲一区二区三区无码国产| 亚洲午夜精品一区二区公牛电影院 | 精品人妻中文av一区二区三区| 日本成人一区二区| 国产一区二区视频在线观看| 亚洲老妈激情一区二区三区| 国产一区二区在线视频| 亚洲av午夜福利精品一区人妖| 国产高清在线精品一区二区三区 | 无码人妻精品一区二区三区久久 | 欧美日本精品一区二区三区| 中文精品一区二区三区四区| 69久久精品无码一区二区| 亚洲一区二区三区不卡在线播放 | 人妻精品无码一区二区三区| 一区二区三区高清视频在线观看| 亚洲中文字幕丝袜制服一区 | 国产一区二区三区精品久久呦| 精品无码一区二区三区水蜜桃| 免费看一区二区三区四区| 人妻无码久久一区二区三区免费| 国产在线乱子伦一区二区| 国产AV一区二区精品凹凸 | 波多野结衣的AV一区二区三区 | 国产精品va一区二区三区| 中文字幕色AV一区二区三区| 国产伦精品一区二区三区免.费| 91大神在线精品视频一区| A国产一区二区免费入口| 天堂va视频一区二区|