第5章　型変換

# **型変換**
***

## **1.暗黙の型変換**
暗黙の型変換とはある処理において、その処理過程で行われる明示的ではない型変換のことです。 
<br>

### **1-1.等価演算子の暗黙的な型変換**  
等価演算子（==）では異なるデータ型を比較した場合に、同じ型となるように暗黙的な型変換をしてから比較します。
#### **例**  
[sample5-1.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
      
       document.write('1 == "1"の結果：',(1 == "1"),'<br/>');  // 比較前に、文字列は数値に変換される。     
       document.write('null == undefinedの結果：',(null == undefined),'<br/>');  // この 2 つの値は等しいものとして扱われる。
       document.write('0 == false の結果：',(0 == false),'<br/>');  // 比較前に、論理値は数値に変換される。
       document.write('"0" == false の結果：',("0" == false),'<br/>');  // 比較前に、論理値は数値に変換される。     
    </script>
</body>
</html>
```
#### **実行結果**  
1 == "1"の結果：true  
null == undefinedの結果：true  
0 == false の結果：true  
"0" == false の結果：true

暗黙的な型変換によって意図しない結果となるため、比較には厳密等価演算子（===）を使うべきです。

<br>

### **1-2.演算により型変換**
JavaScriptは文字列の結合を優先する仕様となっています。 そのため、数値の1を文字列の"1"へ暗黙的に変換してから、文字列結合します。
```
var x = 1 + ‘2‘;//数字の1を文字の‘1‘にキャストし、‘2‘と繋がれて、
                  xに格納されたのは文字の‘12‘です。
```

## **2.明示的な型変換**  
### **2-1.Any -> 真偽値**
JavaScriptではBooleanコンストラクタ関数を使うことで、任意の値をtrueまたはfalseの真偽値に変換できます。

#### **例**
[sample5-2.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>      
       document.write('Boolean("string")の結果：' , Boolean("string") , '<br/>');  //  => true 
       document.write('Boolean(1)の結果：' , Boolean(1) , '<br/>');  //  => true 
       document.write('Boolean(0)の結果：' , Boolean(0) , '<br/>');  //  => false
       document.write('Boolean("")の結果：' , Boolean("") , '<br/>');  //  => false 
       document.write('Boolean(null)の結果：' , Boolean(null) , '<br/>');  //  => false     
    </script>
</body>
</html>
```
#### **実行結果**
Boolean("string")の結果：true  
Boolean(1)の結果：true  
Boolean(0)の結果：false  
Boolean("")の結果：false  
Boolean(null)の結果：false

<br>

### **2-2.数値 -> 文字列**
**（１）** 数値から文字列へ明示的に変換する場合は、**String**コンストラクタ関数を使います。
```
String(1); // => "1"
```
#### **例**
[sample5-3.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>    	    
       document.write('1のデータ型：' , typeof 1, '<br/>'); 
       document.write('String(1)のデータ型：' , typeof String(1), '<br/>');              
    </script>
</body>
</html>
```
#### **実行結果**  
1のデータ型：number  
String(1)のデータ型：string

**（２）**  ```toString()```メソッドを使って、数値を文字列に変換できます。
```
var num = 123;
var result = num.toString();
```
#### **例**
[sample5-4.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script> 
       var num = 123;
       var result = num.toString();   	    
       document.write('numのデータ型：' , typeof num, '<br/>'); 
       document.write('resultのデータ型：' , typeof result, '<br/>');              
    </script>
</body>
</html>
```
#### **実行結果**
numのデータ型：number  
resultのデータ型：string

<br>

### **2-3.文字列 -> 数値**
**（１）** 文字列から数値へ明示的に変換するには**Number**コンストラクタ関数が利用できます。
```
Number("2"); // => 2
```

#### **例**
[sample5-5.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>    
       document.write('1+ "2"の結果：' , 1+"2" , '<br/>');  
       document.write('1+Number( "2")の結果：' , 1+Number( "2") , '<br/>');         
    </script>
</body>
</html>
```
#### **実行結果**  
1+ "2"の結果：12  
1+Number( "2")の結果：3

<br>

**（２）** ```parseInt( 文字列 )```メソッドを使って、文字列を数値に変換できます。

```
var str = '123';
var result = parseInt( str ); 
```
#### **例**
[sample5-6.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script> 
       var str = '123';
       var result = parseInt( str );  	    
       document.write('strのデータ型：' , typeof str, '<br/>'); 
       document.write('resultのデータ型：' , typeof result, '<br/>');              
    </script>
</body>
</html>
```
#### **実行結果**
strのデータ型：string  
resultのデータ型：number

***

>**練習**
>>**問題1**[ex5-1.html]

下記コードで何を出力しましょうか。
```
var a=123;
document.write('2 == "1"の結果：',(2 == "1"),'<br/>');
document.write('String(2)の結果：' , String(2), '<br/>');
document.write('a=123,a.toString()の結果：' , a.toString(), '<br/>');
```

>>**問題2**[ex5-2.html]

下記コードで何を出力しましょうか。
```
document.write(Number(true)+"<br/>"); 
document.write(Number(false)+"<br/>"); 
document.write(Number(null)+"<br/>"); 
document.write(Number(undefined)+"<br/>"); 
document.write(Number("001")+"<br/>"); 
document.write(Number("001.1")+"<br/>"); 
document.write(Number("0x10")+"<br/>"); 
document.write(Number(new String("11aa"))+"<br/>");
```

>>**問題3**[ex5-3.html]

下記コードで何を出力しましょうか。
```
document.write(parseInt("1")+"<br/>"); 
document.write(parseInt("  1")+"<br/>"); 
document.write(parseInt("1.1")+"<br/>"); 
document.write(parseInt("11aa")+"<br/>"); 
document.write(parseInt("020")+"<br/>"); 
document.write(parseInt("")+"<br/>"); 
document.write(parseInt("AF")+"<br/>"); 
document.write(parseInt("AF",16)+"<br/>"); 
document.write(parseInt("0xAF")+"<br/>"); 
```

content

第5章 型変換

第5章　型変換