Javascript의 문자열에서 $ {} (달러 기호 및 중괄호)의 의미는 무엇입니까?


160

여기 또는 MDN에서 아무것도 보지 못했습니다. 나는 단지 뭔가를 놓치고 있다고 확신합니다. 이 어딘가에 대한 문서가 있습니까?

기능적으로 +연산자를 사용하여 연결하지 않고 문자열 안에 변수를 중첩시킬 수있는 것처럼 보입니다 . 이 기능에 대한 설명서를 찾고 있습니다.

예:

var string = 'this is a string';

console.log(`Insert a string here: ${string}`);


당신이 요구하는 것에 대한 문맥을 줄 수 있습니까? 이 질문은 서면으로 명확하지 않습니다.
Sam Hanley


5
이것은 나쁜 질문이 아닙니다. 그것은 새로운 기능이며, 정확히는 무엇을 보았는지에 대한 예는 좋았을지라도 SO에서 복제본을 찾을 수는 없습니다.

@ squint— 동의하지만 샘플 코드와 소스 참조가 도움이되었을 것입니다.
RobG

예제가 추가되었습니다. 참조는 코딩 과제에 있었지만 마치 방금 사용하는 것처럼 주어진 것입니다. 아무것도 보지 못했고 아무것도 찾을 수 없었습니다. (지난 몇 년 동안 나는 여기에 Q를 물어볼 필요가 없었습니다. 그래서 지금은 거의 모든 것을 가지고있는 것 같습니다 ...)
Darren Joy

답변:


192

템플릿 리터럴 에 대해 이야기하고 있습니다.

여러 줄 문자열과 문자열 보간을 모두 허용합니다.

여러 줄 문자열 :

console.log(`foo
bar`);
// foo
// bar

문자열 보간 :

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar


67
오랫동안 혼란스러워했던 한 가지는 템플릿 리터럴이 작은 따옴표 ( ') 대신 키보드의 "1"왼쪽에있는 백틱을 사용한다는 것입니다.
Sydney

19
쿨 : 할 수 있습니다 심지어 "주입"코드 :console.log(`Your array:\n ${arr.join('\n ')}`)
T4NK3R

5
Template LiteralIE에서 지원되지 않는 것이 이상 하거나 IE가 멋진 것을 지원하지 않는 것이 당연합니다. 더 읽기
Mohammad Musavi

12

위의 주석에서 언급했듯이 템플릿 문자열 / 리터럴 내에 식을 가질 수 있습니다. 예:

const one = 1;
const two = 2;
const result = `One add two is ${one + two}`;
console.log(result); // output: One add two is 3


템플릿 문자열을 사용하여 코드를 문자열에 삽입 할 수 있다고 말하는 것이 맞습니까?
carloswm85

식을 주입하고 있으며 식은 코드입니다. 그러나 코드 유형을 삽입 할 수는 없지만 JavaScript 표현식 만 삽입 할 수 있습니다.
Joel H

좀 더 구체적으로 노력하겠습니다. 문자열 리터럴을 사용할 때 $ {} 표기법을 사용하여 문자열에 obj.value 와 같은 표현식을 삽입 할 수 있습니다 . 권리?
carloswm85

예, 콘솔에서 직접 사용해 볼 수 있습니다.hey ${obj.name}
Joel H

0

템플릿 리터럴을 사용하여 암시 적 유형 변환을 수행 할 수도 있습니다. 예:

let fruits = ["mango","orange","pineapple","papaya"];

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.