숫자는 간단하게 7이나 3.14처럼 원하는 숫자를 그대로 쓰면 되지만, 문자를 표현할 땐 조금 다르다. 자바스크립트에서는 문자 데이터를 문자열 형태로 다뤄야 하고, 이 문자열을 표현할 땐 특정 기호(큰따옴표("), 작은따옴표('), 등)가 필요하다. 이번에 문자열을 표현하는 다양한 방법을 정리해본다.
1. 기본적인 문자열 표현 방식
문자열을 표현하려면 글자 양쪽을 큰따옴표("), 작은따옴표('), 또는 백틱(```)으로 감싸야 한다. 이걸 감싸지 않고 쓰면 자바스크립트는 문자열이 아니라 코드로 인식해서 오류를 낸다.
// 숫자 표현
console.log(7); // 숫자 7
console.log(3.14); // 숫자 3.14
// 문자열 표현
console.log("JavaScript"); // 큰따옴표로 감싼 문자열 "JavaScript"
console.log('Hello'); // 작은따옴표로 감싼 문자열 'Hello'💡 작은 팁: 문자열을 감쌀 때 큰따옴표(
")와 작은따옴표(')중 무엇을 써도 되지만 일관성이 중요하다. 같은 코드에서 두 종류의 따옴표를 섞어 쓰면 오류 가능성이 커진다. 예를 들어, 자바스크립트는 작은따옴표(')로 시작한 문자열은 작은따옴표(')로 끝나야만 하나의 문자열로 인식하는데, 만약 시작과 끝의 따옴표가 다르면 나머지 부분을 문자열로 인식하지 못해 오류가 발생한다.
// 잘못된 예시 - 따옴표 혼용으로 인한 오류 발생
console.log("Hello'); // SyntaxError: Unexpected token ')'
// 올바른 예시
console.log("Hello");
console.log('Hello');위 코드에서 시작은 큰따옴표("),로 했는데, 끝은 작은따옴표(')로 되어 있어서 자바스크립트가 이 문자열의 끝을 제대로 인식하지 못하는 거다. 그래서 예기치 않은 토큰이라는 의미로 "Unexpected token"이라는 문구와 함께 SyntaxError가 발생한다.
SyntaxError는 코드 문법에 문제가 있을 때 발생하는 에러다. 자바스크립트가 코드를 해석하면서 "이건 잘못된 문법이야!"라고 인식하는 부분에서 이 에러를 띄운다. 즉, 자바스크립트가 코드 구문을 제대로 이해하지 못하면SyntaxError가 발생하는 거다.
2. 문자열 안에 따옴표 포함시키기
문자열 안에 작은따옴표(')나 큰따옴표(")를 포함하고 싶을 땐 두 가지 방법이 있다.
- 방법 1: 문자열을 감싸는 따옴표와 다른 종류의 따옴표를 안에 넣는다. 예를 들어, 큰따옴표(
")로 문자열을 감싸고 내부에는 작은따옴표(')를 사용하면 오류가 발생하지 않는다. - 방법 2: 같은 종류의 따옴표를 사용해야 할 경우, 포함된 따옴표 앞에 역슬래시(
\\)를 넣어서 자바스크립트에게 "이 따옴표는 문자열의 일부로 포함하라"고 알려줄 수 있다.
// 서로 다른 따옴표 사용 - 문제 없음
console.log("Hello 'World'"); // 큰따옴표로 감싸고 작은따옴표 포함 가능
console.log('Hello "World"'); // 작은따옴표로 감싸고 큰따옴표 포함 가능
// 같은 따옴표 사용 + 역슬래시(\) 사용
console.log('Hello \'World\''); // 작은따옴표 포함을 위해 역슬래시 사용
console.log("Hello \"World\""); // 큰따옴표 포함을 위해 역슬래시 사용만약 역슬래시를 사용하지 않고 같은 종류의 따옴표를 사용하면 자바스크립트는 문자열의 끝을 잘못 인식해 나머지를 문자열로 처리하지 못한다. 이 경우
SyntaxError가 발생하고, 코드 에디터에서 빨간 줄로 오류 위치가 표시된다.
3. 백틱(Template Literals) 활용하기
가독성을 높이고 싶을 때는 백틱(```)을 사용하는 게 좋다. 백틱을 이용하면 문자열 안에 큰따옴표(")나 작은따옴표(')를 그대로 사용할 수 있기 때문에 따옴표 앞에 역슬래시(\\)를 넣는 번거로움이 없다. 그리고 백틱을 쓰면 문자열 안에 변수나 표현식을 쉽게 삽입할 수 있는 템플릿 리터럴 기능도 쓸 수 있어 코드가 훨씬 깔끔해진다.
예시: 백틱을 이용한 문자열 표현
// 큰따옴표와 작은따옴표를 자유롭게 사용
console.log(`"Hello", 'World'! Welcome to JavaScript.`);
// 결과: "Hello", 'World'! Welcome to JavaScript.
예시: 템플릿 리터럴을 이용한 변수와 표현식 삽입
템플릿 리터럴 안에서는 ${ } 구문을 사용해 변수나 표현식을 삽입할 수 있다. 이 기능은 문자열 조합을 훨씬 간단하게 만들어 준다.
const userName = "Alice";
const age = 25;
console.log(`안녕하세요, ${userName}님! 당신의 나이는 ${age}살입니다.`);
// 결과: 안녕하세요, Alice님! 당신의 나이는 25살입니다.
템플릿 리터럴에서 ${ } 구문 안에는 간단한 연산도 가능하다.
const price = 1000;
const quantity = 3;
console.log(`총 가격은 ${price * quantity}원입니다.`);
// 결과: 총 가격은 3000원입니다.
백틱을 사용하면 큰따옴표와 작은따옴표를 섞어 쓸 때 불필요한 에러를 피할 수 있고, 템플릿 리터럴을 통해 가독성도 높아진다.
4. 문자열 연산
문자열은 + 연산자를 사용해서 서로 연결할 수 있다. 숫자 연산처럼 보이지만 자바스크립트에서 +는 문자열끼리 연결하는 기능을 제공한다.
console.log("Hello, " + "World!"); // 결과: "Hello, World!"
// 숫자처럼 보이는 문자열도 연결됨
console.log("3" + "5"); // 결과: "35" (문자열 '3'과 '5'를 연결)주의할 점: 3 + 5는 숫자 연산이라 8이지만, "3" + "5"는 문자열 연산이라 "35"가 된다. 이렇게 문자열 연산에서는 더하기 기호가 문자열 연결로 연산되기 때문에 본인이 더하려고 하는 값이 문자열인지 숫자인지 꼭 명확하게 인지하고 연산할 필요가 있다.
요약
자바스크립트에서 문자열을 표현할 때는 큰따옴표, 작은따옴표, 백틱 중 하나로 일관되게 감싸야 한다. 감싸는 따옴표가 서로 다르면 문자열을 제대로 인식하지 못해
SyntaxError가 발생하므로, 일관된 따옴표 사용은 필수적이다. 문자열 안에 따옴표를 포함할 땐 서로 다른 따옴표를 쓰거나 역슬래시(\\)를 사용하는 방식이 있다. 또한, 백틱을 사용하면 변수나 표현식을 쉽게 문자열에 포함할 수 있다.마지막으로, 문자열에서
+는 연결 연산자로 동작하는데, 이걸 숫자 연산과 혼동하지 않도록 주의 필요가 있다.
