2012年8月29日 星期三

JavaScript 特性測試(一) , 三元運算式

JavaScript 特性測試一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javaScript特性測試一</title>
<style>
table {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: collapse;
background-color: white;
}
table td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
height: 30px;
}
</style>
<script>
window.onload = function(){
var values = [ , undefined, 'undefined', 0, '0', false, 'false', '', new String(), null];
var texts  = ['', 'undefined', "'undefined'" , '0' , "'0'" , 'false' , "'false'" , "''" , 'new String()' , 'null'];

var table = document.getElementById('myTable');

var createField=function(width){
//用js產生一個td elements
var td = document.createElement('td');
td.style.width = width;
return td;
};

for(var i=0 , length=values.length ; i < length ; i++){
//用js產生一個tr elements
var row = document.createElement('tr');
var field1 = createField('100px');
var field2 = createField('300px');
//將td放到tr裡面
row.appendChild(field1);
row.appendChild(field2);

//將texts[i]的文字,放到td的內容
field1.appendChild(document.createTextNode(texts[i]));
//判斷式,看看數值會執行true或false
var isRunTrue = (values[i])? 'true' : 'false' ;
//將判斷式結果放到td裡顯示出來 
field2.appendChild(document.createTextNode((isRunTrue)));
//將tr放到table裡
table.appendChild(row);
}
}
</script>
</head>
<body>
判斷式:
<span style="font-family: Courier New, Courier, monospace;">
(values[i]) ? 'true' : 'false' ;
</span>
<br />
<br />
<table id="myTable">
<tr>
<td>數值內容</td>
<td>使用三元運算子測試結果  (Run True or False)</td>
</tr>
</table>
</div>
</body>
</html>

輸出結果:
判斷式: (values[i]) ? 'true' : 'false' ; 

數值內容使用三元運算子測試結果 (Run True or False)
false
undefinedfalse
'undefined'true
0false
'0'true
falsefalse
'false'true
''false
new String()true
nullfalse



  • 因為'undefined'是一個字串,會執行true部分所以使用typeof判斷時就要注意這點的使用。
  • 第二個要注意的是0,因為0對於判斷式來說是else。
  • 第三要記得input取回的value都會是字串,所以要特別注意string與number在判斷上的不同,有必要時須要將string轉成number,可以這樣轉換Number('0')。

沒有留言:

張貼留言