JavaScript 문자열에 변수 삽입하는 방법

JavaScript 문자열 안에 변수의 값을 넣으려면 템플릿 리터럴을 사용하세요. 텍스트를 백틱으로 감싸고 값이 들어갈 위치에 `${variableName}` 형식을 넣으면 됩니다. variableName을 실제 변수 이름으로 바꾸면 JavaScript가 현재 값을 삽입합니다. 대부분의 문자열을 만들 때는 템플릿 리터럴이 가장 간단합니다. 콘솔 자리 표시자는 로그에 유용하고, 서식 라이브러리는 기능이 의존성을 추가할 만한 경우에 사용할 수 있습니다.

템플릿 리터럴로 JavaScript 문자열에 변수 삽입하기

템플릿 리터럴은 작은따옴표나 큰따옴표가 아니라 백틱을 사용합니다. JavaScript는 ${와 } 사이의 표현식을 평가하고 그 결과를 문자열로 변환합니다. 완성된 문자열은 변수에 할당하거나, 함수에서 반환하거나, 다른 함수에 전달할 수 있습니다. "Hello, ${name}"처럼 따옴표로 감싼 문자열에서는 보간 구문이 그대로 문자로 남습니다. 작은따옴표와 큰따옴표는 값을 보간하지 않습니다.

다음 예제에서는 인사말을 만들고 합계를 계산한 뒤 완성된 문자열을 message에 할당합니다.

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

${price + 3} 표현식이 먼저 계산되므로 결과값 15가 문자열에 들어갑니다. 바로 앞의 달러 기호는 일반 텍스트입니다. 표현식에는 산술 연산, 속성 접근, 함수 호출 등을 넣을 수 있습니다. 결과 문장을 쉽게 이해할 수 있도록 표현식은 짧게 유지하세요. 템플릿 리터럴은 여러 줄에 걸칠 수 있으며, 내부의 따옴표는 이스케이프하지 않아도 됩니다. ${를 문자 그대로 넣으려면 달러 기호를 \${처럼 이스케이프하고, 백틱을 넣으려면 백슬래시를 사용하세요. 표현식의 결과가 객체라면 JavaScript는 해당 값의 문자열 변환 결과를 사용하므로 원하는 표현이 아닐 수 있습니다. 객체 데이터를 읽기 쉽게 표시하려면 명시적으로 변환하세요. 보간 결과는 일반 텍스트이며 HTML에 안전한 출력이 아닙니다. 신뢰할 수 없는 값을 웹 페이지에 표시할 때는 상황에 맞는 안전한 DOM API를 사용하세요.

기본 서식으로 JavaScript 문자열에 변수 삽입하기

진단 정보를 출력할 때 console.log()는 자리 표시자와 뒤따르는 인수로 메시지 서식을 지정할 수 있습니다. 다음 예제에서는 %s가 이름을, %d가 점수를 서식화하며 인수는 해당 자리 표시자와 같은 순서로 전달됩니다.

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

자리 표시자의 지원 여부와 변환 방식은 콘솔 구현에 따라 달라집니다. 따라서 이는 로그를 위한 편의 기능이지 어디서나 동일하게 동작하는 문자열 생성 API는 아닙니다. console.log()는 진단 출력을 기록하며, 서식이 적용된 메시지를 반환하지 않으므로 변수에 할당하거나 HTML 페이지에 삽입할 수 없습니다. 문자열 값이 필요하면 템플릿 리터럴이나 서식 라이브러리를 사용하세요. 인수는 해당 자리 표시자와 같은 순서로 전달해야 합니다. 콘솔마다 남는 값이나 짝이 맞지 않는 자리 표시자를 다르게 표시할 수 있습니다.

sprintf()로 JavaScript 문자열에 변수 삽입하기

sprintf-js는 sprintf() 함수가 문자열을 반환하는 선택형 라이브러리입니다. 패키지를 설치했고 CommonJS를 사용할 수 있는 프로젝트에서는 const { sprintf } = require("sprintf-js");로 불러온 다음 const message = sprintf("%s has %d items", name, count);처럼 값을 만들 수 있습니다. 이 코드는 API 사용법을 보여 주는 예입니다. 패키지 설치 방법과 가져오기 방식은 프로젝트 환경에 따라 다릅니다. 브라우저 또는 모듈 기반 프로젝트에서는 링크된 프로젝트의 설정 안내를 따르세요.

sprintf()는 형식 지정자와 전달된 인수를 처리합니다. 형식 문자열 안에 작성된 JavaScript 표현식을 평가하지는 않습니다. 각 지정자는 이에 대응하는 인수를 사용합니다. 반복적이거나 더 복잡한 서식에 라이브러리 기능이 도움이 되고 추가 의존성을 감수할 만할 때 선택하세요. 사용 가능한 지정자와 설정 방법은 프로젝트 문서에서 확인할 수 있습니다. 변수 하나가 들어가는 짧은 문장에는 내장 템플릿 리터럴 구문이 보통 더 간단합니다.

결론

일반적인 문자열 생성, 변수 값 삽입, JavaScript 표현식 포함에는 템플릿 리터럴을 사용하세요. 진단 출력을 기록할 때는 console.log() 자리 표시자를 사용할 수 있지만, 구현마다 동작이 다를 수 있고 호출 결과가 재사용 가능한 서식 문자열은 아니라는 점을 기억하세요. 서식 기능이 의존성을 추가할 만한 가치를 제공한다면 sprintf-js를 고려할 수 있습니다. 간단한 보간에는 백틱과 ${...}를 사용하는 것이 변수의 현재 값을 JavaScript 문자열에 넣는 가장 명확한 방법입니다.