문자열 다루기

이번 글에서는 javascript에서 문자열을 다루는 방법에 대해서 알아보려고 합니다.

 

사실 js에서 문자열을 다루는 방법은 이미 있다는 것을 알고 있습니다.

<script>
    let string1 = "javascript 문자열 예시";
    
    ...
    
    
</script>

큰따옴표나 작은 따옴표를 이용해서 문자열을 사용하면 됩니다.

사실 이것만 알고 있어도 큰 문제가 되지는 않습니다.

하지만, 이번 글에서 다루게 될 것을 배운다면

js에서 문자열을 조금 더 쉽게 다룰 수 있을 것이라고 생각합니다.

 

 

1. template literals ( backquote, backtick )

바로 `` 를 이용하는 것입니다.

작은 따옴표와 비슷한 이것(`)은 backquote & backtick이라고 부릅니다.

이것을 썼을 때 장점을 알아봅시다.

 

1-1. Enter 가능

<script>
    let string1 = `aaa
    bbb
    ccc`;
    
    console.log(string1);
</script>

문자열 내에서 Enter 키를 처도 인식한다는 것입니다.

'' 나 ""를 사용하면 하나의 line에서만 사용이 가능합니다.

하지만 ``는 Enter키를 처도 다음 줄에서도 문자열로 인식합니다.

콘솔 로그의 결과입니다. 엔터키에 해당하는 '\n'이 들어간 것을 확인할 수 있습니다.

 

1-2. 변수와 문자가 섞인 문자열 가능

기존에 알고 있던 방식으로 문자열을 정의한다면

• let str1 = "My name is " + name + " ! Hello ~ ";

이런 식으로 정의해야 합니다.

이렇게 정의하는 것을 상당히 귀찮다고 여길 수도 있습니다.

<script>
    let name = "Kim";
    let string1 = `My name is ${name} ! Hello ~`;
    console.log(string1);
</script>

``를 사용한다면 한 줄 안에, + 기호 없이 정의할 수 있습니다.

여기서 변수에 해당하는 값은 ${} 표현식을 사용해서 변수를 표현하면 됩니다.

콘솔 창에도 잘 나타나 있는 것을 확인할 수 있습니다.

 

 

2. tagged literals

tagged literals는 ES6에서 추가된 기능으로 

'문자 해체 분석' 기능을 가지고 있습니다.

문자열을 문자와 변수들로 나눠주는 기능입니다.

예시를 작성해보겠습니다.

<script>
    function stringFunc(strs, value) {
    	console.log(strs);
        console.log(value);
    }
    
    let name = "손흥민";
    stringFunc`안녕하세요 ${name}입니다.`;
</script>

• stringFunc 라는 함수를 만들어주고
• name이라는 변수도 만들어준 후
• stringFunc를 실행합니다.
• 이 때 소괄호는 사용하지 않고 바로 backquote를 사용하면 됩니다.

결과는 이렇게 나옵니다.

• strs 는 Array 형태로 나옵니다. → 문자들만 나온 것을 볼 수 있습니다.
• value는 string 형태로 나옵니다. → ${} 안에 들어간 파라미터입니다.
• 문자와 변수로 나뉘어진 것을 확인할 수 있습니다.

 

<script>
    function stringFunc(strs, value1, value2) {
        console.log(strs);
        console.log(value1);
        console.log(value2);

        console.log(strs[0] + value1);
        console.log(strs[1] + value2);
    }
        
    let name = "Kim";
    let age = "23";
    stringFunc`My name is ${name}. My age is ${age}. Amazing~`
</script>

• 만약 변수를 더 사용하고 싶다면 함수에 파라미터를 추가하면 됩니다.
• 그리고 strs는 Array 형태이기 때문에 각 원소에 접근해서 사용도 가능합니다.

문자와 변수로 잘 나뉘고 문자 배열에서 n번째 원소를 꺼내서 쓰는 것도 잘 됩니다.

 

이렇게 문자해체분석 기능에 대해서도 알아봤습니다.

(아마 알아두면 어디선가 쓰지는 않을까요..?)

 

 

js에서 문자열을 다루는 새로운 방법인 backquote에 대해서 알아봤습니다.

잘 쓴다면 코딩을 더 깔끔하게 진행하는 것이 가능하리라고 생각합니다.

 

이것으로 마무리 하겠습니다.

 

 

 

출처: 코딩애플 - 쉽게 이해하는 JavaScript 객체지향 & ES6 신문법