2nd/10_Wiki/Topic_JavaScript/JavaScript_String_Templates.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
javascript-string-templates	JavaScript String Templates	Frontend	draft	conceptual		template strings template literals back-tics string interpolation ES6 strings		B	0.89	2026-06-23	2026-06-23			javascript js web frontend w3schools template-literals interpolation es6	https://www.w3schools.com/js/js_string_templates.asp

JavaScript String Templates

🎯 한 줄 통찰 (One-line insight)

Template strings use back-ticks instead of quotes, letting you embed both quote types, write multiline text, and interpolate variables and expressions with ${...} — an ES6 feature supported in all modern browsers since June 2017. [S1]

🧠 핵심 개념 (Core concepts)

• Back-tics define the string — template strings use back-ticks (`) rather than the quotes (") to define a string. [S1]
• Both quote types allowed inside — template strings allow both single and double quotes inside a string. [S1]
• Multiline strings — template strings allow multiline strings. [S1]
• Interpolation — template strings allow variables in strings using the ${...} syntax. [S1]
• Expression substitution — template strings allow interpolation of expressions in strings. [S1]
• ES6 feature — template strings are an ES6 feature; ES6 is fully supported in all modern browsers since June 2017. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Interpolate variables — drop variables straight into text with ${variable} instead of concatenating with +. [S1]
• Interpolate expressions — compute inline, e.g. ${(price * (1 + VAT)).toFixed(2)}. [S1]
• Build HTML templates — assemble HTML by interpolating values and looping to append list items. [S1]

📖 세부 내용 (Details)

Back-Tics Syntax Template strings use back-ticks (`) rather than the quotes (") to define a string. [S1]

let text = `Hello World!`;

Quotes Inside Strings Template strings allow both single and double quotes inside a string. [S1]

let text = `He's often called "Johnny"`;

Multiline Strings Template strings allow multiline strings. [S1]

let text =
`The quick
brown fox
jumps over
the lazy dog`;

Interpolation Template strings allow variables in strings, using the ${...} interpolation syntax. [S1]

let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

Expression Substitution Template strings allow interpolation of expressions in strings. [S1]

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

HTML Templates Template strings can be used to build HTML by interpolating values and looping over data. [S1]

let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

Browser Support Template strings are an ES6 feature, fully supported in all modern browsers since June 2017. [S1]

Browser	Chrome	Edge	Firefox	Safari	Opera
Version	51	15	54	10	38
Date	May 2016	Apr 2017	Jun 2017	Sep 2016	Jun 2016

🛠️ 적용 사례 (Applied in summary)

The page's own snippets are the canonical applied examples — basic back-tick strings, embedded quotes, multiline text, variable and expression interpolation, and an HTML-building loop. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Interpolate variables:

let text = `Welcome ${firstName}, ${lastName}!`;

Interpolate an expression:

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

Build an HTML list:

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.89
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: JavaScript Tutorial
• 관련 개념: JavaScript Strings, JavaScript String Methods, JavaScript ES6, JavaScript Variables
• 참조 맥락: Referenced whenever building dynamic text or HTML from variables, replacing + concatenation.

📚 출처 (Sources)

• [S1] W3Schools — JavaScript String Templates — https://www.w3schools.com/js/js_string_templates.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript String Templates" page (Astra wiki-curation, P-Reinforce v3.1 format).