[JavaScript] 문자열 (String)

처음 자바 스크립트를 배울 때 가장 충격적이었던 일

문자열(String)이란?

문자열 타입 데이터는 우리가 일상 생활에서 확인할 수 있는 모든 글자의 나열이다. 단 컴퓨터에서는 문자열을 다른 데이터 타입과 혼동해 사용하지 않기 위해 따옴표('')를 사용해 단어를 감싼다. 따옴표로 감싸져 있지 않은 텍스트는 문자열로 인식되지 않고 에러를 출력하게 되는데, 이는 자바스크립트가 해당 텍스트를 다른 일반 명령어와 구분할 수 없기 때문이다. 

문자열 타입 데이터를 선언할 때는 큰 따옴표("")를 활용해도 된다. 단, 작은 따옴표와 큰 따옴표를 혼동해서 사용하는 경우에는 에러가 날 수 있으므로 한 가지 따옴표를 선택해서 혼동하지 말자. 또한 문자열은 여러 개의 문자(char) 타입 데이터로 구성된 하나의 배열(Array)이므로 배열처럼 인덱스index를 활용해 해당 문자만 찾아내는 것도 가능하다.

---

문자열 vs 숫자

문자열은 숫자 데이터 타입과 매우 다르지만 어느 부분에서는 비슷한 점을 가졌다. 그 증거로 문자열도 '+ 연산자'의 사용이 가능하다.

위의 예시처럼 두 문자열을 합칠 수 있지만, 오해하지 말자. 문자열은 숫자 데이터 타입과 다르다. 숫자는 서로를 더하면 그 합이 되지만 문자의 합은 두 문자를 결합시킨다. 

이게 왜 에러가 안 나죠?

자바스크립트 언어만이 가지고 있는 특징인데, 브라우저는 문자를 다른 데이터 타입과 + 연산자를 함께 사용할 경우 문자열이 아닌 데이터 타입을 강제로 문자열화(stringify)시킨다. 자바스크립트에서 2+2는 4지만 '2' + '2' 는 '22'다. 따라서 + 연산자와 문자열을 함께 쓸 때는 조심하도록 하자. 관련해서 '.concat(string1, string2, ...)' 함수를 사용해서 같은 기능을 구현할 수 있다. 

또한 앞서 배운 비교연산자를 사용할 때 서로 다른 데이터 타입의 값을 비교할 때는 반드시 일치(===) 연산자를 사용해야 한다. 그렇지 않으면 아래와 같은 일이 벌어진다.

• 1번 예시: 비교연산자 동등(==)은 피연산자의 '데이터 값(value)'만 비교하기 때문에 true값이 반환된다.
• 2번 예시: 첫번째 예시와 같은 일을 방지하기 위해 우리는 일치(===) 비교연산자를 사용하면 데이터 타입까지 비교하여 false값을 반환받을 수 있다.
• 3번 / 4번 예시: 각 데이터의 전역 객체를 활용하면 해당 괄호 안의 데이터 값을 전역 객체의 값으로 변경할 수 있다.

각 예시에 대한 설명이다. 만약 데이터 값을 바꾸지 않은 채 데이터 타입만을 바꾸고 싶다면, 3번과 4번 예시를 참고하자.

---

템플릿 리터럴(Template Literal)

만약 우리가 문자열 사이에 변수를 사용하고 싶다면 어떻게 해야할까?

위의 경우처럼 문자열과 + 연산자를 적절히 사용하면 데이터값을 출력하면서 문자열을 완성할 수 있지만, 아쉬운 점이 발생한다. 만약 100줄 짜리 문장을 작성해야 할 때 중간중간 변수값이 들어있다면 매번 문자를 따옴표를 활용해 나누고, 그 사이사이에 일일이 + 연산자를 활용한 후 다시 이후에 이어질 문장에 따옴표를 추가해야 한다.

끔찍하다

만약 실수라도 했다간 해당 변수를 찾는 것도 어려울 뿐더라 문장을 고쳐야 할 때도 어려울 것이다. 이럴 때 사용할 수 있는 것이 바로 탬플릿 리터럴이다. 탬플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴(위키백과: 소스 코드의 고정된 값을 대표하는 용어)다. 탬플릿을 사용하는 방법은 간단하다. 따옴표 대신 백틱grave accent(``)을 사용해 문자열을 구성하고, 변수값이 필요할 때 $와 중괄호 ( ${변수} )를 사용해 입력하면 된다. 이 경우 중간중간 따옴표로 문장을 닫을 필요가 없으며, 해당 플레이스 홀더(변수값을 감싸고 있는 $중괄호)를 단어 취급하기 때문에 띄어쓰기에 신경을 상대적으로 덜 쓸 수 있다. 

탬플릿 리터럴 사용 예시

때문에 긴 문장과 변수를 여럿 함께 사용해야 할 때는 탬플릿 리터럴을 적극적으로 활용하도록 하자. 추가로, 탬플릿 리터럴은 줄 바꿈도 자유롭게 할 수 있다. 문장을 완성했을 때 백틱을 유지한 채 줄을 바꾸면 자연스럽게 줄 바꿈이 적용된다.

---

이 외에도 문자열 전역 객체를 활용한 다양한 문법들이 존재한다. 자세한 건 MDN을 참조하자. (다 외울 필요 없이 필요할 때 찾아서 쓰되 기본적인 문법은 외우면 좋을 것 같다.)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN