第9節(jié) Javascript數(shù)據(jù)類(lèi)型轉(zhuǎn)換-零點(diǎn)程序員

第9節(jié) Javascript數(shù)據(jù)類(lèi)型轉(zhuǎn)換-零點(diǎn)程序員-王唯

avaScript中的數(shù)據(jù)類(lèi)型非常靈活；將一種類(lèi)型轉(zhuǎn)為另外一種數(shù)據(jù)類(lèi)型，如：將string類(lèi)型的1轉(zhuǎn)換為數(shù)字類(lèi)型的1；

為什么要進(jìn)行類(lèi)型轉(zhuǎn)換：因?yàn)閿?shù)據(jù)之間的運(yùn)算需要是同類(lèi)型的運(yùn)算，如果不同類(lèi)型進(jìn)行運(yùn)算，需要將其轉(zhuǎn)換為同一種類(lèi)型后再進(jìn)行運(yùn)算。

類(lèi)型轉(zhuǎn)換分為兩種：強(qiáng)制類(lèi)型轉(zhuǎn)換和自動(dòng)類(lèi)型轉(zhuǎn)換；

1）自動(dòng)轉(zhuǎn)換：

在運(yùn)行過(guò)程中根據(jù)運(yùn)算的語(yǔ)意環(huán)境，會(huì)自動(dòng)進(jìn)行類(lèi)型轉(zhuǎn)換；

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

注：最經(jīng)典的是用在if語(yǔ)句中的條件中：

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

數(shù)據(jù)類(lèi)型轉(zhuǎn)換

2）強(qiáng)制（顯式）類(lèi)型轉(zhuǎn)換：

盡管JavaScript可以自動(dòng)進(jìn)行類(lèi)型轉(zhuǎn)換，但有時(shí)仍需要顯示轉(zhuǎn)換，或者有時(shí)為了使代碼變得更加清晰易讀。

使用String()、Number()、Boolean()等函數(shù)強(qiáng)制轉(zhuǎn)換；

a）轉(zhuǎn)換為數(shù)值：

有3個(gè)函數(shù)可以把非數(shù)值轉(zhuǎn)換為數(shù)值：Number()、parseInt()、parseFloat()；Number()可以用于任何類(lèi)型，而另外兩個(gè)則專(zhuān)門(mén)用于把字符串轉(zhuǎn)換成數(shù)值；這三個(gè)函數(shù)對(duì)于同樣的輸入會(huì)有不同的返回結(jié)果；

Number()函數(shù)：轉(zhuǎn)換規(guī)則如下：

如果是Boolean值，true和false分別被轉(zhuǎn)換為1和0；

如果是數(shù)字值，會(huì)直接返回該數(shù)值；

如果是undefined，返回NaN；

如果是null，返回0；

如果是字符串，則遵循以下規(guī)則：如果字符串中只包含數(shù)字（包括前面的正號(hào)或負(fù)號(hào)），則將其轉(zhuǎn)換為十進(jìn)制數(shù)，如“123”會(huì)變成123，而“011“會(huì)變成11（注：前導(dǎo)零忽略了）；如果字符串中包含有效的浮點(diǎn)格式，如”1.1“，會(huì)被轉(zhuǎn)換為浮點(diǎn)數(shù)值（同樣，也忽略前導(dǎo)零）；如果字符串包含有效的十六進(jìn)制格式，如”0xf“，則被轉(zhuǎn)換為相同大小的十進(jìn)制數(shù)；會(huì)忽略字符串前面的空格；如果字符串是空的（不包含任何字符），則轉(zhuǎn)換為0；如果字符串中包含除上述格式之外的字符，則被轉(zhuǎn)換為NaN；

如果是對(duì)象，則調(diào)用對(duì)象的valueOf()方法，然后依照前面的規(guī)則轉(zhuǎn)換返回的值；

一元操作符（+、-）的操作與Number()函數(shù)相同，會(huì)將操作數(shù)轉(zhuǎn)換為數(shù)字；

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

parseInt()和parseFloat()函數(shù)：

由于Number()函數(shù)在轉(zhuǎn)換字符串時(shí)比較復(fù)雜而且不夠合理，并且只能基于十進(jìn)制數(shù)進(jìn)行轉(zhuǎn)換，且不能出現(xiàn)非法的尾隨字符，因此在處理整數(shù)的時(shí)候更常用的是parseInt()和parseFloat()函數(shù)；

二者是全局函數(shù)，不從屬于任何對(duì)象的方法；

其在轉(zhuǎn)換時(shí)，更多的是看其是否符合數(shù)值模式；它會(huì)忽略字符串前面的空格，直到找到第一個(gè)非空字符；如果第一個(gè)字符不是數(shù)字字符或者負(fù)號(hào)，其會(huì)返回NaN，即parseInt()轉(zhuǎn)換空字符串時(shí)會(huì)返回NaN（Number不會(huì)）；如果第一個(gè)字符是數(shù)字，parseInt()會(huì)繼續(xù)解析第二個(gè)字符，直到解析完后續(xù)所有字符或遇到到一個(gè)非數(shù)字字符；如：

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()可以識(shí)別出十六進(jìn)制數(shù)，識(shí)別不了八進(jìn)制，在解析八進(jìn)制時(shí)，去除零轉(zhuǎn)換為十進(jìn)制；

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

parseInt()在識(shí)別八進(jìn)制時(shí)，第3版可以識(shí)別，但第5版識(shí)別不了，為了解決這個(gè)問(wèn)題，可以為parseInt()指定第二個(gè)參數(shù)：轉(zhuǎn)換基數(shù)，如：

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

在指定了進(jìn)制后，字符串可以不帶前面的“0x“或“0”，如：

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

注：當(dāng)然除了八進(jìn)制，十六進(jìn)制，還可以指定其他進(jìn)制；如：

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()類(lèi)似，parseFloat()也是如此，但如果字符串里有兩個(gè)小數(shù)點(diǎn)，第二個(gè)小數(shù)點(diǎn)就是無(wú)效的了。

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

parseFloat()只能解析十進(jìn)制數(shù)，會(huì)忽略字符串的前導(dǎo)零，即十六進(jìn)制數(shù)會(huì)被始終轉(zhuǎn)換成0；

如果字符串包含的是一個(gè)可解析為整數(shù)的值，或者小數(shù)點(diǎn)后是零，parseFloat()會(huì)返回整數(shù)；

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) 轉(zhuǎn)換為字符串：

要把一個(gè)值轉(zhuǎn)換為一個(gè)字符串有兩種方式；第一種是使用幾乎每個(gè)值都有的toString()方法；該方法會(huì)返回相應(yīng)值的字符串；

var age=18;
var ageString=age.toString();
var found=true;
console.log(found);  // "true" ，實(shí)際上調(diào)用了：found.toString()或found.valueof();

注：數(shù)值、布爾值、對(duì)象和字符串值都有toString()方法，但null和undefined值沒(méi)有這個(gè)方法；

可以為toString()指定一個(gè)可選的基數(shù)（radix）的參數(shù)；默認(rèn)情況下，toString()方法以十進(jìn)制格式返回?cái)?shù)值的字符串表示；通過(guò)設(shè)置基數(shù)，可以輸出其他進(jìn)制表示的字符串；如：

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

第二種方法：使用String()，這個(gè)函數(shù)可以將任何類(lèi)型的值轉(zhuǎn)換為字符串，包括null或undefined；

轉(zhuǎn)換規(guī)則：如果值有toString()方法，則調(diào)用該方法（沒(méi)有參數(shù)）；如果值是null，則返回null；如果是undefined，則返回undefined；

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

如果要把某個(gè)值轉(zhuǎn)換為字符串，可以使用加號(hào)操作符把它與一個(gè)空字符串拼接。

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

c）轉(zhuǎn)換為Boolean：

可以使用轉(zhuǎn)型函數(shù)Boolean()，如：var message="zero"; alert(Boolean(message));

使用Boolean()，會(huì)返回一個(gè)Boolean一個(gè)值，但返回的值是true還是false，取決于要轉(zhuǎn)換值的數(shù)據(jù)類(lèi)型及其實(shí)際值；

轉(zhuǎn)換為Boolean類(lèi)型值

這些轉(zhuǎn)換規(guī)則一般用在控制語(yǔ)句（如if語(yǔ)句）自動(dòng)執(zhí)行相應(yīng)的Boolean轉(zhuǎn)換，如：

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

一元“！”運(yùn)算符也將其操作數(shù)轉(zhuǎn)換為布爾值并取反，這是在代碼中進(jìn)行這種類(lèi)型轉(zhuǎn)換的慣用用法：

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

檢測(cè)類(lèi)型：

typeof操作符：

ECMAScript中的數(shù)據(jù)是松散類(lèi)型的，因此需要有一種方法來(lái)檢測(cè)給定的變量的數(shù)據(jù)類(lèi)型：typeof，其會(huì)返回以下字符串：

undefined值未定義、boolean布爾值、string字符串、number數(shù)值、object對(duì)象或null、function函數(shù)；

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

說(shuō)明：typeof是一個(gè)操作而非不是一個(gè)函數(shù)，因此可以不使用括號(hào)；

注：有時(shí)typeof會(huì)返回一個(gè)令人迷惑但技術(shù)上卻正確的值，如：typeof null，會(huì)返回object，因?yàn)樘厥庵祅ull被認(rèn)為是一個(gè)空的對(duì)象引用；

注：從技術(shù)角度來(lái)說(shuō)，函數(shù)在ECMAScript中是對(duì)象，不是一種數(shù)據(jù)類(lèi)型；然而，函數(shù)也確實(shí)有一些特殊的屬性，因此通過(guò)typeof操作符來(lái)區(qū)分函數(shù)和其他對(duì)象是有必要的。

instanceof操作符：

雖然typeof是個(gè)非常有用的工具，但是在檢測(cè)引用類(lèi)型的值時(shí)，用處不大；有時(shí)，想確認(rèn)一個(gè)對(duì)象具體是什么類(lèi)型的對(duì)象，就需要使用instanceof操作符了；

語(yǔ)法：result=variable instanceof constructor

如果變量是引用類(lèi)型的實(shí)例，其會(huì)返回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);

說(shuō)明：根據(jù)規(guī)定，所有引用類(lèi)型的值都是Object的實(shí)例；因此，在檢測(cè)一個(gè)引用類(lèi)型值和Object構(gòu)造函數(shù)時(shí)，instanceof操作符始終會(huì)返回true；

使用instanceof操作符在檢測(cè)基本類(lèi)型的值，會(huì)返回false，因?yàn)榛绢?lèi)型不是對(duì)象。

Web前端開(kāi)發(fā)之Javascript-零點(diǎn)程序員-王唯

些你不知道的Javascript隱式類(lèi)型轉(zhuǎn)換

JavaScript是一種動(dòng)態(tài)類(lèi)型、弱類(lèi)型語(yǔ)言，它在處理字符和字符串時(shí)表現(xiàn)出了獨(dú)特的靈活性和復(fù)雜性。在本文中，我們將從探討JavaScript中的一段通過(guò)隱式類(lèi)型轉(zhuǎn)換的看似瘋狂但有效的代碼片段到熟知Javascript中的隱式類(lèi)型轉(zhuǎn)換規(guī)則

瘋狂仍有效的代碼

JavaScript的靈活性和隱式類(lèi)型轉(zhuǎn)換能力使得一些看似不合理的代碼片段實(shí)際上是有效的。一個(gè)典型的例子就是以下代碼：

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

轉(zhuǎn)換規(guī)則

符號(hào)運(yùn)算規(guī)則[]空數(shù)組，在JavaScript中被視為真值（truthy）。盡管它是一個(gè)空數(shù)組，但它的存在本身就表示為真。!邏輯非（NOT）運(yùn)算符，將其操作數(shù)的布爾值取反。結(jié)果是一個(gè)布爾值。!!雙重邏輯非操作，將其操作數(shù)轉(zhuǎn)換為布爾值。這是一個(gè)常見(jiàn)的技巧，用于將任何值轉(zhuǎn)換為布爾值。+加號(hào)運(yùn)算符不僅用于數(shù)值相加，當(dāng)其一個(gè)操作數(shù)是字符串或可以轉(zhuǎn)換為字符串時(shí)，JavaScript會(huì)將另一個(gè)操作數(shù)也轉(zhuǎn)換為字符串，然后進(jìn)行字符串連接操作。

轉(zhuǎn)換步驟

符號(hào)運(yùn)算過(guò)程運(yùn)算結(jié)果![]空數(shù)組 [] 在JavaScript中被視為真值（truthy）。對(duì)其進(jìn)行邏輯非操作 !，結(jié)果是 false(false+[])[+!![]]![] + []![] 的結(jié)果是 false，與空數(shù)組 [] 進(jìn)行字符串連接操作，結(jié)果是 "false"("false")[+!![]]!![]布爾值 true("false")[+true]+!![]將布爾值 true 轉(zhuǎn)換為數(shù)值 1("false")[1](![]+[])[+!![]]("false")[1] 獲取字符串 "false" 的第 1 個(gè)字符（從 0 開(kāi)始計(jì)數(shù)），結(jié)果是字符 "a""a"

進(jìn)一步探索

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

JSF u ck中，用了7455個(gè)字符來(lái)構(gòu)建'z', 我們可以看出，逐個(gè)解析對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)是十分困難的，它的可讀性很差且難以讓人理解，所以我們?cè)谌粘ｉ_(kāi)發(fā)中都不會(huì)像這樣來(lái)寫(xiě)代碼，但是我們?yōu)榱嗽黾娱_(kāi)發(fā)效率和避免一些隱式類(lèi)型錯(cuò)誤問(wèn)題，我們?nèi)孕枰ナ煜こＲ?jiàn)的隱式類(lèi)型轉(zhuǎn)換，以下是一些隱式類(lèi)型轉(zhuǎn)換的規(guī)則。

類(lèi)型轉(zhuǎn)換規(guī)則

基礎(chǔ)的隱式類(lèi)型轉(zhuǎn)換

算術(shù)運(yùn)算符

在算術(shù)運(yùn)算符中，只有字符串與運(yùn)算符‘+'一起進(jìn)行轉(zhuǎn)換時(shí)，會(huì)轉(zhuǎn)換成字符串，其他情形下均轉(zhuǎn)換成數(shù)字

// +運(yùn)算符和字符串一起，均轉(zhuǎn)換成字符串
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)

邏輯運(yùn)算符

邏輯運(yùn)算符中，運(yùn)算符非(|)會(huì)轉(zhuǎn)換成布爾值，而運(yùn)算符或(||) 和與(&&)會(huì)進(jìn)行真/假值判斷, 或(||)第一個(gè)為假輸出第二個(gè)值，第一個(gè)為真輸出第一個(gè)值。與(&&)第一個(gè)為真輸出第二個(gè)值，第一個(gè)為假輸出第一個(gè)值

// 非(!)
console.log(!true)        //false
console.log(![])          // false
console.log(!!{})         // true !{} 會(huì)調(diào)用{}的valueOf 和 toString, 轉(zhuǎn)換成[object object]

// 或(||) 和 與(&&)
console.log(0 || 1)       // 1
console.log(1 || 0)       // 1
console.log(0 && 1)       // 0
console.log(1 && 0)       // 0

位運(yùn)算符

位運(yùn)算符與(&)，或(|)，異或(*)，取反(~)，左移(<<)，右移(>>)均會(huì)進(jìn)行二進(jìn)制值的轉(zhuǎn)換

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)

復(fù)雜的隱式類(lèi)型轉(zhuǎn)換

對(duì)象轉(zhuǎn)換為基本類(lèi)型

在javaScript中,對(duì)象在需要轉(zhuǎn)換為基本類(lèi)型時(shí),會(huì)調(diào)它們的tostring()或者valueof()方法。

操作數(shù)類(lèi)型運(yùn)算符轉(zhuǎn)換規(guī)則示例object + string+調(diào)用 valueOf() 和 toString() 方法({}) + '' 結(jié)果為 "[object Object]"object - number-調(diào)用 valueOf() 方法轉(zhuǎn)換為數(shù)字({valueOf() { return 3; }}) - 1 結(jié)果為 2

let obj={
  toString() {
    return '42';
  },
  valueOf() {
    return 10;
  }
};

console.log(obj + 10); // 輸出 52
console.log(String(obj)); // 輸出 '42'

解析：當(dāng)對(duì)象參與加法運(yùn)算時(shí)，JavaScript會(huì)調(diào)用valueOf() 方法獲取基本類(lèi)型值。在字符串上下文中，則會(huì)調(diào)用toString()方法。

Symbol 類(lèi)型的隱式轉(zhuǎn)換

Symbol 是 ES6 引入的一種新的原始數(shù)據(jù)類(lèi)型，用于創(chuàng)建唯一的標(biāo)識(shí)符。Symbol 類(lèi)型的值在轉(zhuǎn)換為字符串或數(shù)字時(shí)，會(huì)拋出錯(cuò)誤

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 類(lèi)型的值在隱式轉(zhuǎn)換為字符串或數(shù)字時(shí)會(huì)拋出錯(cuò)誤，必須顯式轉(zhuǎn)換

幾個(gè)隱式類(lèi)型轉(zhuǎn)換陷阱

數(shù)組與數(shù)字運(yùn)算

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

解析：空數(shù)組轉(zhuǎn)換為字符串為 ''，與數(shù)字 1 相加結(jié)果為 '1'。數(shù)組 [1] 轉(zhuǎn)換為字符串為 '1'，數(shù)組 [1,2] 轉(zhuǎn)換為 '1,2'，與數(shù)字 1 相加結(jié)果為 '1,21'。

空對(duì)象與布爾運(yùn)算

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

解析：與boolean值比較，兩邊都轉(zhuǎn)換成數(shù)字，這時(shí){}會(huì)轉(zhuǎn)換成[object object]最后轉(zhuǎn)數(shù)字成NaN。空數(shù)組 [] 轉(zhuǎn)換為布爾值為 true，但與 false 比較時(shí)，會(huì)首先轉(zhuǎn)換為數(shù)字 0，所以結(jié)果為 true。

undefined 和 null

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

解析：undefined 沒(méi)有數(shù)值形式，所以當(dāng)undefined + 1時(shí)，嘗試將undefined轉(zhuǎn)換為數(shù)字失敗，結(jié)果為NaN. Null 在算術(shù)運(yùn)算過(guò)程中，會(huì)被當(dāng)作0，所以結(jié)果為1。當(dāng)用'=='進(jìn)行比較時(shí)，javascript會(huì)將它們視為相等，因?yàn)樗麄兌际?#34;無(wú)"或者"空"的特殊值。

復(fù)雜應(yīng)用場(chǎng)景中的隱式類(lèi)型轉(zhuǎn)換

JSON 與對(duì)象轉(zhuǎn)換

在復(fù)雜的條件語(yǔ)句中，隱式類(lèi)型轉(zhuǎn)換也可能導(dǎo)致意外結(jié)果

let jsonStr='{"a": 1, "b": "2"}';
let obj=JSON.parse(jsonStr);

console.log(obj.a + obj.b); // 輸出 '12'

解析：JSON.parse 將 JSON 字符串轉(zhuǎn)換為對(duì)象，但對(duì)象屬性 b 仍為字符串，與數(shù)字屬性 a 相加時(shí)進(jìn)行字符串拼接。

類(lèi)型轉(zhuǎn)換與條件語(yǔ)句

在復(fù)雜的條件語(yǔ)句中，隱式類(lèi)型轉(zhuǎn)換也可能導(dǎo)致意外結(jié)果

let x=0;
let y='0';

if (x==y) {
  console.log('x==y'); // 會(huì)輸出
}

if (x===y) {
  console.log('x===y'); // 不會(huì)輸出
}

if (x || y) {
  console.log('x || y'); // 會(huì)輸出
}

解析：在 x==y 中，JavaScript 會(huì)將 y 轉(zhuǎn)換為數(shù)字 0，結(jié)果為 true。在 x || y 中，x 為假值（false），但 y 為真值（非空字符串 '0'），結(jié)果為 '0'。

總結(jié)

以上內(nèi)容展示了JavaScript中隱式類(lèi)型轉(zhuǎn)換的強(qiáng)大與復(fù)雜性，以及如何利用這些特性構(gòu)建出看似瘋狂但有效的代碼片段。了解這些規(guī)則和陷阱對(duì)于編寫(xiě)健壯的JavaScript代碼至關(guān)重要。

作者:唐亞婷

來(lái)源-微信公眾號(hào):大轉(zhuǎn)轉(zhuǎn)FE

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

用Ueditor 上傳視頻成功了預(yù)覽也可以但在再次編輯回顯內(nèi)容準(zhǔn)備修改時(shí) 發(fā)現(xiàn) 視頻的小logo 不見(jiàn)了，用查看html發(fā)現(xiàn)src根本就沒(méi)有值鏈接在保存的過(guò)程丟失了

工具/原料

myeclipse
ueditor

方法/步驟

這個(gè)問(wèn)題困擾很久，上網(wǎng)查找發(fā)現(xiàn)也有遇到這一同一問(wèn)題
ueditor 上傳成功預(yù)覽成功查看html 代碼如下：
<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>
保存完返回回顯再編輯時(shí) 就會(huì)出現(xiàn)：
<p><video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src data-setup="{}"></video></p>
可惜下面沒(méi)有多少可解決問(wèn)題的好方法

卡住了，只好乖乖的再去查看API 。
終于在 getContent()的方法中找到了點(diǎn)點(diǎn)蹤跡；
getContent()獲取到的是經(jīng)過(guò)編輯器內(nèi)置的過(guò)濾規(guī)則進(jìn)行過(guò)濾后得到的內(nèi)容。
因?yàn)檎f(shuō)明在獲取時(shí)，存在一個(gè)過(guò)濾的過(guò)程。關(guān)鍵在于這個(gè)過(guò)濾！

查看資料得知在ueditor.config.js 里存在白名單的設(shè)置。白名單里過(guò)濾掉了各種標(biāo)簽的屬性。在重新編輯上傳視頻時(shí)，ueditor 會(huì)自動(dòng)的將video轉(zhuǎn)化為img

設(shè)置白名單。在配置文件ueditor.config.js 中，有默認(rèn)過(guò)濾規(guī)則相關(guān)配置項(xiàng)目找到whitList的位置（365行左右）。配置video和img過(guò)濾的標(biāo)簽名單。
其他的過(guò)濾項(xiàng)目可以根據(jù)自己的需求添加修改。設(shè)置完后，清除瀏覽器緩存，查看效果。

如果設(shè)置白名單的方法沒(méi)有效果，可以簡(jiǎn)單粗暴的將默認(rèn)過(guò)濾機(jī)制去掉，在ueditor.all.js中，找到函數(shù)UE.plugins['defaultfilter']=function () {...}（plugin 編輯器默認(rèn)的過(guò)濾轉(zhuǎn)換機(jī)制位于9967行左右）。
第一種在函數(shù)里添加return; 所有過(guò)濾機(jī)制失效。
第二種將case 'img' 部分的代碼注釋掉，不過(guò)濾img標(biāo)簽（再編輯時(shí)ueditor 會(huì)自動(dòng)的將video轉(zhuǎn)化為img）的情況。
如果引用的是 ueditor.all.min.js，需要對(duì)此做同樣的修改。

設(shè)置完后，清除瀏覽器緩存，查看效果。打開(kāi)html，路徑存在！OK

注意事項(xiàng)

參考資料中放了些鏈接，希望對(duì)大家有用！不足之處請(qǐng)多多指教！

在線咨詢

上一篇：HTML5開(kāi)發(fā)流媒體視頻在線直播系統(tǒng)“直播平臺(tái)核心技
下一篇：5套獨(dú)立的app手機(jī)端模板界面代碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商