티스토리 뷰

development/html javascript CSS

[JavaScript] 에서 문자열의 생성법과 가공법 / backtick, ${변수명}

Happyoon ~ 2021. 10. 15. 00:36
728x90
반응형

1. 자바스크립트에서 문자열을 만드는 3가지 방법

1. ' ' 활용

2. " " 활용

3. ` ` 활용

 

1, 2번은 다른 언어를 다루며 알고 있던 부분이지만 3번 backtick에 대해서는 이번에 알게 되었다.

backtick을 사용하면 개행문자를 넣은 것처럼 문자열을 출력할 수 있다.

 

예제를 살펴보자.

 

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step08_ect3.html</title>
</head>
<body>
    <h1>javascript에서 문자열을 만드는 세가지 방법</h1>
    <p></p>
    <script>
        let str1 = 'kimgura';
        let str2 = "kimgura";
        //backtick
        let str3 = `kimgura`;
        let str4 = `
            하나
            두울
            세엣
            ...
        `;
    </script>

    
</body>
</html>

 

 

결과1

1, 2번에서는 불가하지만 backtick 사용 시 개행문자를 넣은 효과를 줄 수 있음을 확인할 수 있다.

 

2. JavaScript에서 문자열을 이어붙이는 두가지 방법

 

자바스크립트에서 문자열을 이어붙이는 방법에는 다음의 두가지 방법이 있다.

 

1. 연결연산자 '+' 사용

2. ${변수명} 사용

 

2번의 사용법은 다음과 같다.

let info2 = `이름: ${myName} 주소: ${myAddr}`;

 

 

예제를 통해 활용법을 알아보자.

 

예제2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step08_ect3.html</title>
</head>
<body>
    <h1>javascript에서 문자열을 만드는 세가지 방법</h1>
    <p></p>
    <script>

        let myName = "김구라";
        let myAddr = "노량진";

        //문자열을 이어 붙이는(가공) 두가지 방법을 비교해 보세요.
        let info="이름: "+myName+" 주소: "+myAddr;
        let info2 = `이름: ${myName} 주소: ${myAddr}`;
    </script>

    
</body>
</html>

 

 

결과2

 

결과는 두가지 방법이 동일하게 나옴을 확인할 수 있다.

반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] setInterval() 주기마다 반복 작업 시행 method  (0) 2021.10.15
[JavaScript] setTimeout() 시간 지연시켜 작업 수행 method  (0) 2021.10.15
[JavaScript] append()  (0) 2021.10.15
[JavaScript] insertAdjacentHTML()과 insertAdjacentElement(), append()의 쓰임 비교!!  (0) 2021.10.15
[JavaScript] innerHTML / innerHTML과 append()의 비교  (0) 2021.10.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함