JavaScript에서 backtick 문자(') 사용
JavaScript에서 backtick은† 단일 인용문과 동일하게 작동합니다.예를 들어 backtick을 사용하여 다음과 같은 문자열을 정의할 수 있습니다.
var s = `abc`;
backtick의 동작이 실제로 단일 견적의 동작과 다른 방법이 있습니까?
① 프로그래머들 사이에서 backtick은 더 일반적으로 심각한 액센트로 불리는 것의 한 가지 이름이라는 점에 유의하십시오.프로그래머는 때때로 "backquote"와 "backgrave"라는 대체 이름을 사용합니다.또한 Stack Overflow 등에서 "back tick"의 다른 일반적인 철자는 "back-tick"과 "back tick"입니다.
ECMAScript 2015 규격의 이전 버전에서는 "템플릿 문자열"로 불렸다.
템플릿 리터럴은 Firefox 34, Chrome 41, Edge 12 이상에서 지원되지만 Internet Explorer에서는 지원되지 않습니다.
- 예: http://tc39wiki.calculist.org/es6/template-strings/
- 공식 사양: ECMAScript 2015 언어 사양, 12.2.9 템플릿 리터럴 어휘 구성 요소(약간 건조함)
템플릿 리터럴을 사용하여 여러 줄 문자열을 나타낼 수 있으며 "인터폴레이션"을 사용하여 변수를 삽입할 수 있습니다.
var a = 123, str = `---
a is: ${a}
---`;
console.log(str);
출력:
---
a is: 123
---
더 중요한 것은 변수 이름뿐만 아니라 모든 JavaScript 식을 포함할 수 있다는 것입니다.
var a = 3, b = 3.1415;
console.log(`PI is nearly ${Math.max(a, b)}`);
ECMAScript 6은 backtick을 딜리미터로 사용하여 새로운 유형의 문자열 리터럴을 제공합니다.이러한 리터럴을 사용하면 기본 문자열 보간식을 포함할 수 있으며, 이 표현식은 자동으로 구문 분석 및 평가됩니다.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
바와 같이, 는 ★★★★★★★★★★★★★★★★★★★★★★★★★★」`리터럴로 이지만, 은 """ "" "" "" " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " 형식의 은 " " " " " " 형식의 표현입니다.${..}는 즉시 해석되어 인라인으로 평가됩니다.
문자열 리터럴을 삽입하면 여러 줄에 걸쳐 분할할 수 있다는 장점이 있습니다.
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men like RajiniKanth
// to come to the aid of their
// country!
보간식
유효한 표현식은 모두 내부에 표시할 수 있습니다.${..}함수 호출, 인라인 함수 표현 호출 및 기타 보간 문자열 리터럴을 포함하는 보간 문자열 리터럴!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
★★★★★★★★★★★★★★★★★★★★.`${who}s`때 더 했던 것 같아요.who로 "s"가 )who + "s", 리터럴은,일 뿐, 되는
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
HTML에 템플릿 리터럴을 사용하면 번거로움을 줄임으로써 확실히 가독성이 높아집니다.
평범한 옛날 방식:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
ECMAScript 6의 경우:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- 문자열은 여러 줄에 걸쳐 있을 수 있습니다.
- 따옴표를 피할 필요가 없습니다.
- 다음과 같은 그룹화는 피할 수 있습니다:">"
- 더하기 연산자를 사용할 필요가 없습니다.
태그 부착 템플릿 리터럴
템플릿 문자열에 태그를 붙일 수도 있습니다.템플릿 문자열에 태그를 붙이면 리터럴과 치환이 함수에 전달되어 결과 값이 반환됩니다.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
여기서 산포 연산자를 사용하여 여러 값을 전달할 수 있습니다.첫 번째 인수(문자열이라고 부릅니다)는 모든 플레인 문자열(보간된 식 사이의 항목)의 배열입니다.
뒤에 모든 를 '값'이라고 을 '값'이라고.... gather/rest operator('문자열') 수도 문자열'은 '문자열'로 되어 있습니다).value1,value2등 ) 。
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
값 배열에 수집된 인수는 문자열 리터럴에서 이미 평가된 보간식의 결과입니다.태그가 달린 문자열 리터럴은 보간 평가 후 최종 문자열 값이 컴파일되기 전의 처리 단계와 같기 때문에 리터럴에서 문자열을 생성하기 위한 제어를 강화할 수 있습니다.재사용 가능한 템플릿 작성 예를 살펴보겠습니다.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
원시 문자열
태그 함수는 문자열이라고 불리는 첫 번째 인수를 받습니다.을 사용하다그러나 추가 데이터가 포함되어 있습니다. 즉, 모든 문자열의 가공되지 않은 원시 버전입니다.은 raw string 을 하여 할 수 ..raw다음과 같이 합니다.
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
바와 같이 은 이스케이프된 raw를 합니다.\nsequence는 sequence를 지정하는데, 처리된 버전의 문자열은 이스케이프되지 않은 실제 새 행과 동일하게 취급합니다.할 수 (ECMAScript 6)이 .String.raw(..). 생으로
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"
Backticks)`를 사용하여 템플릿리터럴을 정의합니다.템플릿 리터럴은 ECMAScript 6의 새로운 기능으로 스트링 조작을 용이하게 합니다.
특징:
- 템플릿 리터럴에 어떤 식으로든 삽입할 수 있어요
- 여러 줄일 수 있습니다.
주의: 작은 따옴표를 쉽게 사용할 수 있습니다.'와 큰따옴표( )"`를 참조해 주세요.
예제:
var nameStr = `I'm "Alpha" Beta`;
때는 이렇게 .${expression}표기를 사용합니다.
var name = 'Alpha Beta';
var text = `My name is ${name}`;
console.log(text); // My name is Alpha Beta
줄은 더 이상 합니다.\n더 이상 새로운 라인을 위해.
예제:
const name = 'Alpha';
console.log(`Hello ${name}!
How are you?`);
출력:
Hello Alpha!
How are you?
문자열 보간 외에 back-tick을 사용하여 함수를 호출할 수도 있습니다.
var sayHello = function () {
console.log('Hello', arguments);
}
// To call this function using ``
sayHello`some args`; // Check console for the output
// Or
sayHello`
some args
`;
스타일 구성 요소를 점검하십시오.그들은 그것을 많이 사용한다.
백틱은 템플릿 문자열로 알려진 템플릿 리터럴을 묶습니다.템플릿 리터럴은 표현식과 문자열 보간 기능을 포함할 수 있는 문자열 리터럴입니다.
홀더에 되어 있습니다. 있습니다. 표현식은 「달러 기호」와「콜리 괄호」로 됩니다.${expression}. 표시자 자리 표시자/식이 함수에 전달됩니다.기본 함수는 문자열만 연결합니다.
백틱을 피하려면 백슬래시를 그 앞에 붙입니다.
`\`` === '`'; => true
백틱을 사용하여 여러 줄 문자열을 보다 쉽게 쓸 수 있습니다.
console.log(`string text line 1
string text line 2`);
또는
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
vs. vanilla JavaScript:
console.log('string text line 1\n' +
'string text line 2');
또는
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
이스케이프 시퀀스:
- 된 Unicode
\u: " " )\u00A9 - 코드 Code Escape):
\u{}: " " )\u{2F804} - 는 16진수 이스케이프에 의해 되었습니다.
\x: " " )\xA9 - 에 시작된 리터럴
\자리수: " (a) 자 、 " : :\251
요약:.
JavaScript의 backticks는 ECMAScript 6 // ECMAScript 2015에서 도입된 기능으로, 쉽게 동적 문자열을 만들 수 있습니다.이 ECMAScript 6 기능은 템플릿 문자열 리터럴이라고도 합니다.통상의 문자열에 비해 다음과 같은 이점이 있습니다.
- 템플릿 문자열에서는 줄 바꿈이 허용되므로 여러 줄 바꿈을 사용할 수 있습니다. 리터럴로)
''★★★★★★★★★★★★★★★★★」""할 수 는 회선 브레이크는 사용할 수 없습니다. - 을 쉽게 할 수 .
${myVariable}구문을 사용합니다.
예제:
const name = 'Willem';
const age = 26;
const story = `
My name is: ${name}
And I'm: ${age} years old
`;
console.log(story);브라우저 호환성:
템플릿 문자열 리터럴은 모든 주요 브라우저 벤더에서 기본적으로 지원됩니다(Internet Explorer 제외).그래서 당신의 생산 코드에 사용해도 안전합니다.브라우저 호환성에 대한 자세한 목록은 여기를 참조하십시오.
좋은 점은 기본적인 계산을 직접 할 수 있다는 것입니다.
let nuts = 7
more.innerHTML = `
<h2>You collected ${nuts} nuts so far!
<hr>
Double it, get ${nuts + nuts} nuts!!
`<div id="more"></div>공장 기능에서 매우 유용하게 쓰이게 되었습니다.
function nuts(it){
return `
You have ${it} nuts! <br>
Cosinus of your nuts: ${Math.cos(it)} <br>
Triple nuts: ${3 * it} <br>
Your nuts encoded in BASE64:<br> ${btoa(it)}
`
}
nut.oninput = (function(){
out.innerHTML = nuts(nut.value)
})<h3>NUTS CALCULATOR
<input type="number" id="nut">
<div id="out"></div>이것은 매우 유용한 기능입니다.예를 들어 3초 타이밍 함수의 설정을 테스트하기 위한 Node.js 코드 스니펫이 여기에 있습니다.
const waitTime = 3000;
console.log(`setting a ${waitTime/1000} second delay`);
설명.
- 대기시간을 3000으로 선언합니다.
- 백틱을 사용하면 선택한 텍스트와 동일한 줄에 '대기 시간'을 1000으로 나눈 계산 결과를 포함할 수 있습니다.
- 'wait'를 사용하여 타이머 기능을 추가로 호출합니다.time' 상수는 console.log 인수로 계산한 대로 3초 지연이 발생합니다.
템플릿 템플릿을 만들어 개인 변수에 도달할 수도 있습니다.
var a= {e:10, gy:'sfdsad'}; //global object
console.log(`e is ${a.e} and gy is ${a.gy}`);
//e is 10 and gy is sfdsad
var b = "e is ${a.e} and gy is ${a.gy}" // template string
console.log( `${b}` );
//e is ${a.e} and gy is ${a.gy}
console.log( eval(`\`${b}\``) ); // convert template string to template
//e is 10 and gy is sfdsad
backtick( b ); // use fonction's variable
//e is 20 and gy is fghj
function backtick( temp ) {
var a= {e:20, gy:'fghj'}; // local object
console.log( eval(`\`${temp}\``) );
}
많은 코멘트가 당신의 질문에 답하고 있지만, 저는 주로 이 질문에 기여하고 싶었습니다.
backtick의 동작이 실제로 단일 견적의 동작과 다른 방법이 있습니까?
템플릿 문자열의 차이점으로는 오브젝트 속성으로 설정할 수 없습니다.이 투고에 대한 자세한 내용은 승인된 답변에서 인용한 흥미로운 문구입니다.
템플릿 문자열은 표현식이지 리터럴1이 아닙니다.
그러나 기본적으로 오브젝트 속성으로 사용하려면 대괄호로 둘러싸야 합니다.
// Throws error
const object = {`templateString`: true};
// Works
const object = {[`templateString`]: true};
언급URL : https://stackoverflow.com/questions/27678052/usage-of-the-backtick-character-in-javascript
'source' 카테고리의 다른 글
| 정수를 2로 나눌 때 어떤 옵션을 사용하는 것이 더 좋을까요? (0) | 2022.09.16 |
|---|---|
| MariaDB JDBC 클라이언트 로깅이 작동하지 않음 (0) | 2022.09.16 |
| 각도 2 호버 이벤트 (0) | 2022.09.16 |
| Virtual DOM이란? (0) | 2022.09.15 |
| 세션이 타임아웃되었음을 클라이언트에 알리기 위해 어떤 http 상태 코드를 사용해야 합니까? (0) | 2022.09.15 |