템플릿 문자열


 자바스크립트에서 보통 문자열을 연결하거나, 문자열 사이에 숫자를 이용하여 연산을 하여 결과를 보여주고 싶을때,


+연산자를 이용한다.


하지만 이 +연산자를 이용하여 문자열과 숫자를 결합하다보면 코드가 다소 복잡해 질 수도 있다.


그래서 ECMAScript6 부터 이를 좀 더 편리하게 하기 위해서 템플릿 문자열 이라는 기능을 추가하였다.


템플릿 문자열은 나타내고자 하는 문자열을 ' ` ' 기호로 감싸고 숫자나 변수를 문자열 사이에 넣고자 하는 경우 ' ${} '기호를 이용한다.


※ ' ` ' 기호는 키보드 숫자 1키 왼쪽에 있음.


` 문자열1 ${숫자 or 변수} 문자열2`


위와 같이 템플릿 문자열을 사용하면 문자열이 길어져도 코드가 복잡해 지지 않는다.


한가지 주의할 점은 모든 버전의 IE에서는 사용이 불가능 하다. 크롬에서는 가능하다.





저작자표시

'개발 > JavaScript' 카테고리의 다른 글

[JavaScript] 삼항연산자와 짧은 조건문  (1) 2018.06.19
[JavaScript] 변수와 상수  (0) 2018.06.19
[JavaScript] 일치연산자  (0) 2018.06.15
[JavaScript] 불 자료형 변환  (0) 2018.06.14
[JavaScript] NaN  (0) 2018.06.14

일치연산자


 자바스크립트에서는 두가지 종류의 일치연산자가 있다. 간략히 설명하자면 아래와 같다.


1. ==, !=


- 자동형변환이 이루어져서 값만 비교

- 자료형이 달라도 값이 같으면 true


2. ===, !==


-  자료형과 값 모두를 비교

-  자료형과 값이 모두 같아야 true


1번은 자료형이 다르고 같은 값이면 자동으로 형변환이 이루어 진다.


1
2
3
4
5
6
    <script>
        alert('' == false); //1
        alert('' == 0);     //2
        alert(0 == false);  //3
        alert('273' == 273);//4
    </script>
cs


위의 코드를 실행하면 모두 true가 출력된다.

각각의 경우를 살펴보자.

1번은 문자열 타입과 불 타입 이라서 자료형이 다르지만, 자동형변환으로 false == false가 되어 true가 된다.

2번은 문자열과 숫자 이지만 둘다 불 타입은 false라서 true가 된다.

3번은 숫자와 불형이지만 숫자 0은 불 타입으로 false이기 때문에 false == false라서 true가 된다.

4번은 숫자 273이 하나는 문자열이고 하나는 숫자 이지만 자료형이 자동으로 변환되어 273이라는 값만 비교하여 결과는 true가 나온다.


이렇게 == 연산자를 쓸경우 자료형을 엄격하게 검사하지 않아 원하지 않는 결과가 나올 수도 있다.



2번은 값이 같아도 자료형이 다르면 다른 값으로 판단한다. 즉 자료형검사를 엄격하게 한다.



1
2
3
4
5
6
    <script>
        alert('' === false); //1
        alert('' === 0);     //2
        alert(0 === false);  //3
        alert('273' === 273);//4
    </script>
cs


비교하는 피연산자의 값 뿐만 아니라 자료형까지 비교하므로 위의 코드는 모두 false가 출력된다.

저작자표시

'개발 > JavaScript' 카테고리의 다른 글

[JavaScript] 변수와 상수  (0) 2018.06.19
[JavaScript] 템플릿 문자열  (0) 2018.06.17
[JavaScript] 불 자료형 변환  (0) 2018.06.14
[JavaScript] NaN  (0) 2018.06.14
[JavaScript] 연산자와 자료형변환  (1) 2018.06.14

불 자료형 변환 / Boolean()


 다른 자료형이 숫자 자료형과 문자열 자료형으로 변환되는 것처럼, 다른 자료형을 불 자료형으로 변환할 수 있다.


Boolean()함수를 이용하면 된다.


Boolean()함수는 아래의 5가지경우를 제외하고는 모두 true를 반환한다.



1
2
3
4
5
6
7
    <script>
        alert(Boolean(0));  //숫자 0
        alert(Boolean(NaN));  //NaN
        alert(Boolean(''));  //빈문자열
        alert(Boolean(null));  //null
        alert(Boolean(undefined));  //undefined형
    </script>
cs



Boolean()함수를 사용하지 않더라도 조건문이나 논리 부정 연산자를 사용하면 불 자료형으로 변환된다.


1
2
3
4
5
6
7
8
9
    <script>
        alert(!!0); //false
        alert(!!NaN);   //false
        alert(!!'');    //false
        alert(!!null);  //false
        
        var variable;   //false
        alert(!!variable);  //false
    </script>
cs


위의 코드와 같이 부정 연산자를 붙이지 않았을때는 각자의 자료형으로 나오는 데이터들이,


부정 연산자를 붙여줌으로써 불 자료형으로 변환된다.

저작자표시

'개발 > JavaScript' 카테고리의 다른 글

[JavaScript] 템플릿 문자열  (0) 2018.06.17
[JavaScript] 일치연산자  (0) 2018.06.15
[JavaScript] NaN  (0) 2018.06.14
[JavaScript] 연산자와 자료형변환  (1) 2018.06.14
[JavaScript] 입력하기  (0) 2018.06.14

+ Recent posts

티스토리툴바