JavaScript 문자열 보간:초보자 가이드

자바스크립트 문자열 보간은 표현식을 문자열의 일부에 삽입하는 프로세스입니다. 템플릿 리터럴은 표현식을 포함하는 데 사용됩니다. 보간을 사용하여 변수 및 수학 계산과 같은 값을 문자열에 추가할 수 있습니다.

JavaScript 문자열 안에 값을 추가해야 합니까? 템플릿 리터럴 구문에서 다뤘습니다. 템플릿 리터럴을 사용하면 여러 줄 문자열로 작업하고 JavaScript 문자열 내부에 값을 포함하기가 더 쉽습니다. 템플릿 리터럴은 JavaScript 문자열 보간 구문입니다.

이 가이드에서는 JavaScript 문자열 보간법에 대해 이야기할 것입니다. 이것이 무엇이며 어떻게 작동하는지 논의하고 시작하는 데 도움이 되는 문자열 보간 예를 살펴보겠습니다.

더 이상 고민하지 않고 시작하겠습니다!

자바스크립트 문자열 보간

템플릿 리터럴을 사용하여 JavaScript 문자열에 값을 추가할 수 있습니다. 이것은 한 쌍의 중괄호 다음에 오는 달러 기호입니다. 중괄호 안에는 값을 문자열에 포함시키려는 표현식이 있어야 합니다.

템플릿 리터럴을 사용하면 연결에 의존하지 않고 문자열에 값을 포함할 수 있습니다. 템플릿 리터럴을 선언하려면 문자열을 따옴표 대신 백틱(")으로 묶어야 합니다.

다음 구문을 고려하십시오.

`This is a string. Here is the value of 9 + 10: ${9 + 10}.`

템플릿 리터럴을 선언했습니다. 우리의 표현은:

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

${9 + 10}

이 표현식은 9 + 10을 평가합니다. 이 표현식의 결과는 문자열 끝에 마침표를 찍기 전에 추가됩니다. 마침표 앞에 우리의 표현을 썼기 때문입니다.

자바스크립트 문자열 보간 예

템플릿 리터럴을 사용하면 값을 문자열에 직접 포함할 수 있습니다. 다음 코드를 고려하십시오.

const address_number = "10 Downing Street";
const prime_minister_address = `The Prime Minister's address is ${address_number}.`;
console.log(prime_minister_address)

코드의 첫 번째 줄은 총리의 주소 번호를 정의합니다. 다음으로 템플릿 리터럴을 사용하여 전체 주소를 만듭니다. ${} 구문은 문자열에 값을 포함하는 데 사용됩니다. 문자열에 "address_number" 값을 추가했습니다.

코드를 실행해 보겠습니다.

The Prime Minister's address is 10 Downing Street

코드가 두 문자열을 병합했습니다.

템플릿 리터럴을 사용하는 경우 리터럴 내부에 모든 값을 포함할 수 있습니다. 여기에는 문자열, 숫자 또는 JavaScript 수학 계산 결과가 포함됩니다. 템플릿 리터럴 안에 템플릿 리터럴을 포함할 필요가 없습니다.

문자열 리터럴의 주요 장점 중 하나는 구문이 명확하다는 것입니다. JavaScript 코드를 문자열에 직접 포함할 수 있습니다.

연결을 사용하여 문자열 병합

연결을 사용하여 문자열을 병합할 수 있습니다. 두 개의 문자열이 있다고 가정해 보겠습니다.

const full_address = `The Prime Minister's address is `;
const address_number = `10 Downing Street`;

더하기 기호(+)를 사용하여 두 문자열을 연결할 수 있습니다.

const prime_minister_address = full_address + address_number + ".";
console.log(prime_minister_address);

JavaScript 콘솔은 다음 값을 출력합니다.

The Prime Minister's address is 10 Downing Street

두 문자열을 결합한 문자열을 성공적으로 만들었습니다. 마지막에 연결 연산자를 사용하여 문장에 마침표(".")를 추가합니다.

그러나 이 구문에는 단점이 있습니다. 문자열 끝에만 값을 추가할 수 있습니다. 이것이 템플릿 리터럴 구문을 도입한 큰 이유입니다. 이제 문자열 중간에 값을 더 쉽게 추가할 수 있습니다.

문자열 보간 자바스크립트:계산

템플릿 리터럴 내부의 코드는 JavaScript 문입니다. 즉, 템플릿 리터럴을 사용하여 계산을 수행하고 해당 값을 프로그램에 포함할 수 있습니다.

카페에서 두 잔의 가격을 계산하고 그 결과를 문자열 안에 넣는 문자열을 만들어 봅시다:

var drink1 = 2.30;
var drink2 = 2.20;

var bill = `The total cost of your drinks is $${drink1 + drink2}.`;

${} 구문 내부에 계산을 추가했습니다. 이 계산은 두 JavaScript 변수의 값을 더합니다. 우리의 변수는 drink1(2.30)과 drink2(2.20)입니다. 코드는 다음 값의 합계가 포함된 문자열을 반환합니다.

The total cost of your drinks is $4.50.

문자열 보간 JavaScript:삼항 연산자

JavaScript 삼항 연산자를 사용하면 명령문이 True인지 False인지 평가할 수 있습니다. if 문을 작성하는 보다 간결한 방법입니다. 삼항 연산자는 if의 결과가 다음과 같은 경우에 특히 유용합니다. 문은 한 줄의 코드만 차지합니다.

고객이 커피에 $4.00 이상을 지출하는 경우 청구서를 제시해야 합니다. 그런 다음 커피 로열티 카드 클럽에 가입하도록 요청해야 합니다. 그렇지 않으면 청구서를 제출해야 합니다. 삼항 연산자를 사용하여 고객 청구서 비용을 확인할 수 있습니다.

var drink1 = 2.30;
var drink2 = 2.20;
var total = drink1 + drink2;

var bill = `The total cost of your drinks is $${total}. ${total > 4.00 ? "Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy." : ""}`;
console.log(bill);

템플릿 리터럴에는 두 개의 포함된 표현식이 포함되어 있습니다. 먼저 문자열 안에 "total" 값을 삽입합니다. 다음으로 삼항 연산자를 사용하여 고객이 커피 하우스의 로열티 카드 클럽에 가입해야 하는지 여부를 확인합니다.

총 구매 가격이 $4.00를 초과하는 경우 콘솔에 다음 메시지가 인쇄됩니다.

The total cost of your drinks is $4.50. Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy.

그렇지 않으면 삼항 연산자가 콜론(":") 뒤에 값을 반환합니다. 표현식이 False로 평가될 때 반환되는 값입니다.

이 예에서 콜론 뒤의 값은 빈 문자열입니다. 즉, 고객의 구매 금액이 $4.00 미만인 경우 템플릿 리터럴의 첫 번째 문장만 반환됩니다.

The total cost of your drinks is $4.50.

결론

템플릿 리터럴을 사용하면 문자열 내부에 값을 포함할 수 있습니다. 템플릿 리터럴 내에서 계산을 수행할 수 있습니다. 백틱을 사용하여 템플릿 리터럴을 선언합니다. 평가할 명령문은 달러 기호와 명령문이 표시되는 한 쌍의 중괄호로 표시됩니다.

JavaScript에 대한 자세한 내용은 JavaScript 학습 방법 가이드를 참조하세요.