[Javascript]タイプ変換と迅速な評価

27483 ワード

隠し型変換または強制型変換


黙ってタイプ変換をすれば、元のタイプxのタイプを変えることができるわけではありません.
var x = 10;
var str = x + '';
console.log(typeof str, str);
console.log(typeof x, x);

文字列タイプの変換


文字列タイプ以外の値を文字列タイプに変換する場合は、次の操作を行います.
0 + '';
true + '';
null + '';

数値タイプの変換


算術演算子と比較演算子を使用して、デフォルトのタイプを数値タイプに変換します.
1 - '1';
1 * '10';
'1' > 0;

ブール型に変換

// 주어진 인자가 Falsy 값이면 true, Truthy 값이면 false를 반환한다.
function isFalsy(v) {
    return !v;
  }
  
  // 주어진 인자가 Truthy 값이면 true, Falsy 값이면 false를 반환한다.
  function isTruthy(v) {
    return !!v;
  }
  
  // 모두 true를 반환한다.
  console.log(isFalsy(false));
  console.log(isFalsy(undefined));
  console.log(isFalsy(null));
  console.log(isFalsy(0));
  console.log(isFalsy(NaN));
  console.log(isFalsy(''));
  
  console.log(isTruthy(true));
  // 빈 문자열이 아닌 문자열은 Truthy 값이다.
  console.log(isTruthy('0'));
  console.log(isTruthy({}));
  console.log(isTruthy([]));

明示的なタイプ変換


これは、開発者が意図的に値を変換するタイプです.
var x = 10;
var str = x.toString();
console.log(typeof str, str);

console.log(typeof x, x);

文字列タイプの変換

// 1) String 생성자 함수를 new 연산자 없이 호출하는 방법
console.log(String(1));        // "1"
console.log(String(true));     // "true"

// 2) Object.prototype.toString 메소드를 사용하는 방법
console.log((1).toString());        // "1"
console.log((true).toString());     // "true"

// 3) 문자열 연결 연산자를 사용하는 방법
console.log(1 + '');        // "1"
console.log(true + '');     // "true"

数値タイプの変換

// 1) Number 생성자 함수를 new 연산자 없이 호출하는 방법
console.log(Number('0'));     // 0
console.log(Number(true));    // 1

// 2) parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
console.log(parseInt('0'));       // 0
console.log(parseInt('-1'));      // -1

// 3) 단항 연결 연산자를 이용하는 방법
console.log(+'0');     // 0
console.log(+true);    // 1

// 4) 산술 연산자를 이용하는 방법
console.log('10.53' * 1); // 10.53
console.log(true * 1);    // 1

ブール型変換

// 1) boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
console.log(Boolean('x'));       // true
console.log(Boolean(''));        // false
console.log(Boolean('false'));   // true
// 숫자 타입 => 불리언 타입
console.log(Boolean(0));         // false
console.log(Boolean(1));         // true
console.log(Boolean(NaN));       // false
console.log(Boolean(Infinity));  // true
// null 타입 => 불리언 타입
console.log(Boolean(null));      // false
// undefined 타입 => 불리언 타 입
console.log(Boolean(undefined)); // false
// 객체 타입 => 불리언 타입
console.log(Boolean({}));        // true
console.log(Boolean([]));        // true

// 2) ! 부정 논리 연산자를 두번 사용하는 방법
// 문자열 타입 => 불리언 타입
console.log(!!'x');       // true
console.log(!!'');        // false
console.log(!!'false');   // true
// 숫자 타입 => 불리언 타입
console.log(!!0);         // false
console.log(!!1);         // true
console.log(!!NaN);       // false
console.log(!!Infinity);  // true
// null 타입 => 불리언 타입
console.log(!!null);      // false
// undefined 타입 => 불리언 타입
console.log(!!undefined); // false
// 객체 타입 => 불리언 타입
console.log(!!{});        // true
console.log(!![]);        // true

3.光学フィルタ演算子(オプションリンク)(?.)

// null 또는 undefined면 undefined 반환 , 그렇지 않으면 우항의 프로퍼티 참조를 이어감.
var elem = null;
var str = '';

var value = elem?.value;
console.log(value); // undefined 반환

var str_leng = str?.length;
console.log(str_leng);

null連結演算子(?)

// 좌항의 피연산자가 null 또는 undefined면 우항의 피연산자를 반환, 그렇지 않으면 
// 좌항의 피연산자를 반환
var foo = null ?? 'default value';
console.log(foo);

var roo = '' ?? 'default';
console.log(roo);
// 좌항이 falsy값이라도 null 또는 undefined가 아니면 그대로 반환
// falsy 값 : false, undefined, null, 0, -0, NaN, '')
参考資料
  • Javascript Deep Dive
  • poiemaweb