JavaScript는 문자열에 변수 삽입
- 템플릿 리터럴을 사용하여 JavaScript의 문자열에 변수 삽입
- 기본 서식을 사용하여 JavaScript의 문자열에 변수 삽입
-
sprintf()를 사용하여 JavaScript의 문자열에 변수 삽입 - 결론
이 기사에서는 JavaScript의 문자열에 변수를 삽입하는 방법을 소개합니다.
템플릿 리터럴을 사용하여 JavaScript의 문자열에 변수 삽입
템플릿 리터럴의 개념은 한동안 JavaScript에서 사용되었습니다. 이전에는 템플릿 문자열로 알려졌습니다. ES6에서템플릿 리터럴이 도입되었습니다. 성가신 문자열 연결을 사용하는 것보다 주어진 문장에 변수를 포함하는 더 쉬운 방법을 제공합니다. 따옴표 (큰 따옴표 또는 작은 따옴표)를 사용하는 대신 백틱 (키보드의 ‘문자)으로 정의 된 템플릿 리터럴을 사용합니다. 백틱에 문자열을 배치하고 변수를 문장에 포함합니다. 다음은 템플릿 리터럴의 사용법입니다.
백틱 집합에 문자열을 포함하는 것만으로도 문자열 값이됩니다. 문자열 텍스트를 큰 따옴표"로 묶는 것과 동일한 기능을합니다. 다음 샘플 코드는 템플릿 리터럴로 사용되는 간단한 문자열을 보여줍니다.
console.log(`Hello World`);
출력:
Hello World
정상적인 문자열이 준비되었습니다. 이 문자열에 변수 값을 표시해야하는 경우 변수를 포함해야합니다. 임베딩하는 동안 변수 앞에$기호를 붙여 중괄호로 묶습니다. 변수 값을 포함하는 구문은${variableName}입니다. 다음 코드에는eggCount변수가 일반 문자열에 포함되어 있으며이 전체 내용은 백틱으로 캡슐화됩니다.
let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);
출력:
On easter we decorted 20 easter eggs
변수를 포함하는 표현식 포함
단순한 문자열 연결과 달리 템플릿 리터럴을 사용하면 JavaScript에서 템플릿 리터럴로 코딩하는 것과 유사하게 둘 이상의 변수가있는 표현식을 포함 할 수 있습니다. 합산, 날짜를 포함한 하위 문자열 가져 오기 등과 같은 특정 작업을 수행해야하는 경우 이러한 모든 기능과 훨씬 더 많은 기능을 템플릿 리터럴을 사용하여 문자열에 포함 할 수 있습니다. 다음 코드 세트에는이를위한 다양한 사용 사례가 있습니다.
let a = 5;
b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);
출력:
Sum of 5 and 10 is 15
날짜와 관련된 또 다른 예는 다음과 같습니다. 여기서는 변수를 사용하지 않지만 템플릿 리터럴에 포함 된 표현식은 자체적으로 작동합니다. 우리가 문장을 연결하는 것처럼 반복해서 큰 따옴표 나 백틱을 사용해야하는 것은 JavaScript가있는 문자열입니다.
console.log(`The date today is ${new Date().getDate()}-${
new Date().getMonth() + 1}-${new Date().getFullYear()}`);
출력:
The date today is 7-4-2021
비고
- 템플릿 리터럴은 문장에 변수를 삽입하는 가장 쉬운 방법 중 하나를 제공합니다.
- 또한 표현식을 문자열에 직접 포함하고 런타임에 계산을 해결하기 위해 컴파일러를 떠날 수 있도록 지원합니다.
- 이제 이스케이프 문자를 사용하지 않고도 문자열에 작은 따옴표와 큰 따옴표를 쉽게 포함 할 수 있습니다.
- 템플릿 리터럴은 코딩을 간단하고 간결하며 깔끔하고 읽기 쉽게 만듭니다.
- 템플릿 리터럴의 값을 새 변수에 할당 할 수 있습니다. 변수 값을 포함하는 새 문자열로 간주 할 수 있습니다.
기본 서식을 사용하여 JavaScript의 문자열에 변수 삽입
변수 값을 문자열에 깔끔하게 삽입하는 또 다른 방법은 JavaScript에서 지원되는 기본 형식을 사용하는 것입니다. JavaScript console.log()를 사용하면 연결을 피하고 대상 문자열에 자리 표시자를 추가 할 수 있습니다. 할당 할 값은 아래와 같이 인수로 전달됩니다.
let a = 5;
b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a + b));
출력:
Sum of 5 and 10 is 15.
이 변수의 값 분석은console.log()에서만 작동합니다. 따라서 다른 변수에 할당하는 데 사용할 수 없으며 HTML UI에 새로 해결 된 문자열을 표시하는 데 사용할 수 없습니다.
비고
console.log()함수로 로깅하는 동안이 방법을 사용할 수 있습니다. 따라서이 방법은 변수에 값을 할당하는 데 작동하지 않습니다. 따라서 로깅 이외의 시나리오에는 적합하지 않을 수 있습니다.- 기본 서식을 사용하는 동안 문자열에 사용되는 자리 표시자는 매개 변수로 전달되는 데이터 유형과 일치해야합니다. 예를 들어, 숫자 값을 표시하려면 문장의 자리 표시자가
%s인 문자열 데이터 유형에 대해%d여야합니다.
let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));
출력:
Sum of 5 and 10 is 15.
전달 된 매개 변수 유형을 고려하는 것을 잊으면 유형 불일치가 있습니다. JavaScript는 변수를 형변환하려고 시도하고 결과 값을 문자열에 추가합니다. 다음 코드는이 현상을 설명합니다.
let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);
출력:
5 of 10 and 15 is NaN.
op1은 숫자 데이터 유형이며%s를 사용하여 최종 문자열에 삽입합니다. %s는 숫자를 문자열 데이터 유형으로 자동 형변환합니다. 이 변환은 순조롭게 진행됩니다. 그러나operation 변수의 경우 값은 시퀀스의 다음 자리 표시 자에 할당됩니다. 이 자리 표시자는%d입니다. 따라서 여기에서는 문자열 데이터 유형이 숫자로 변환됩니다. 변환이 발생하지 않습니다. 따라서 반환 된 결과는 ‘NaN’이며 출력의 끝 단어로 간주됩니다.
(op1 + op2)의 경우에서 본 것처럼 매개 변수에 표현식을 사용할 수 있습니다. JavaScript는 그에 따라 합계로 이해하고 해결합니다.
이 경우 이스케이프 문자를 사용하지 않고는 최종 문자열에 큰 따옴표를 사용할 수 없습니다. 그러나 전체 구조를 큰 따옴표로 캡슐화하는 경우 작은 따옴표를 사용할 수 있습니다. 다음 코드를 참조하십시오.
let op1 = 5, op2 = 10, operation = 'Sum';
console.log('\'%s\' of %d and %d is %d.', operation, op1, op2, (op1 + op2));
출력:
'Sum' of 5 and 10 is 15.
sprintf()를 사용하여 JavaScript의 문자열에 변수 삽입
JavaScript ES6의Template Literals이전에 개발 커뮤니티는 기능이 풍부한sprintf.js라이브러리를 따랐습니다. 라이브러리에는sprintf()라는 메소드가 있습니다. sprintf.js는 JavaScript 용 오픈 소스 라이브러리입니다. Node.js및 브라우저에 대한 구현이 있습니다. 설정 및 구성은 git-hub 페이지를 방문하면됩니다. sprintf()는 문자열 연결을 사용하지 않고 문자열에 변수를 포함하는 데 사용됩니다. 사용법은 다음과 같습니다.
let sprintf = require('sprintf-js').sprintf;
let op1 = 5, op2 = 10, operation = 'Sum';
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));
출력:
Sum of 5 and 10 is 15.
다음과 같은 다양한 유용한 특수 기능이 있습니다.
sprintf()함수는 변수를 다른 순서로 지정할 수 있습니다.- 템플릿 리터럴의 기능과 마찬가지로
sprintf()는 문자열 내에 캡슐화 된 표현식을 확인합니다. - 다양한 형식을 지원합니다. 표준 문자열 및 숫자 외에
sprintf-js라이브러리는 변수 값을 문자열로 출력하기 위해 부울, 이진 형식 등을 지원합니다. - 또한 라이브러리에서 제공하는
vsprintf()메소드를 사용하여 인수를 배열로 지정할 수 있습니다. - 또한 두 번째 인수에 직접 객체를 전달할 수 있으며 변수를 자동으로 해결합니다.
이 라이브러리가 제공하는 더 많은 기능이 있습니다. 자세한 내용은 GitHub 링크에 지정된Read.me파일에서 확인할 수 있습니다.
결론
+및 큰 따옴표를 사용하여 지루한 문자열 연결을 사용하지 않고 문자열에 변수 값을 포함하는 경우 가장 좋은 옵션은 백틱이있는 기능인 템플릿 리터럴을 사용하는 것입니다. 로깅 목적으로 만 출력 문자열에 값을 삽입해야하는 경우 JavaScript의console.log()함수가 유용합니다. 기본적으로 포함 된 서식 옵션이 있습니다. sprintf.js라이브러리는 기능이 풍부하고 변수 값을 포함 할 때 템플릿 리터럴보다 훨씬 많은 것을 제공하므로 공간을 지배합니다. 그러나 그것은 도서관에 익숙해지는 데 약간의 비용이 듭니다.