diff options
Diffstat (limited to 'files/ko/web/javascript/reference/template_literals/index.html')
-rw-r--r-- | files/ko/web/javascript/reference/template_literals/index.html | 30 |
1 files changed, 15 insertions, 15 deletions
diff --git a/files/ko/web/javascript/reference/template_literals/index.html b/files/ko/web/javascript/reference/template_literals/index.html index 882dfc07a1..78ed6fa5a9 100644 --- a/files/ko/web/javascript/reference/template_literals/index.html +++ b/files/ko/web/javascript/reference/template_literals/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Template_literals <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">`string text` +<pre class="syntaxbox ">`string text` `string text line 1 string text line 2` @@ -25,7 +25,7 @@ tag `string text ${expression} string text` <p>템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) 을 이용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( <code>$ {expression}</code> ) 로 표기할 수 있습니다. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 줍니다. 템플릿 리터럴 앞에 어떠한 표현식이 있다면(여기에서는 태그), 템플릿 리터럴은 "태그가 지정된 템플릿"이라고 불리게 됩니다. 이 때, 태그 표현식 (주로 함수)이 처리된 템플릿 리터럴과 함께 호출되면, 출력하기 전에 조작할 수 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬(\)를 넣으십시오.</p> -<pre class="brush: js notranslate">`\`` === "`" // --> true</pre> +<pre class="brush: js ">`\`` === "`" // --> true</pre> <h3 id="Multi-line_strings">Multi-line strings</h3> @@ -33,14 +33,14 @@ tag `string text ${expression} string text` <p>일반 string 들을 사용하여, multi-line strings 들을 얻기 위해서는 아래와 같은 문법을 사용해야 할 것입니다.</p> -<pre class="brush: js notranslate">console.log("string text line 1\n"+ +<pre class="brush: js ">console.log("string text line 1\n"+ "string text line 2"); // "string text line 1 // string text line 2"</pre> <p>같은 효과를 template literal을 통해 얻기 위해서는, 아래와 같이 적을 수 있습니다.</p> -<pre class="brush: js notranslate">console.log(`string text line 1 +<pre class="brush: js ">console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2"</pre> @@ -49,7 +49,7 @@ string text line 2`); <p>표현식(expression)을 일반 문자열(normal strings)에 삽입하기 위해서, 당신은 다음의 문법을 사용할 수 있을 것입니다.</p> -<pre class="brush: js notranslate">var a = 5; +<pre class="brush: js ">var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and @@ -57,7 +57,7 @@ console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); <p>template literals을 이용하면, 이를 더욱 읽기 쉽도록 다음과 같은 문법 설탕(syntactic sugar) 을 활용할 수 있습니다.</p> -<pre class="brush: js notranslate">var a = 5; +<pre class="brush: js ">var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); @@ -72,19 +72,19 @@ not ${2 * a + b}.`); <p>In ES5:</p> -<pre class="notranslate"><code>var classes = 'header' +<pre ><code>var classes = 'header' classes += (isLargeScreen() ? '' : item.isCollapsed ? ' icon-expander' : ' icon-collapser');</code></pre> <p>ES2015에서 중첩(nesting)없이 템플릿 리터럴 사용한 경우:</p> -<pre class="notranslate"><code>const classes = `header ${ isLargeScreen() ? '' : +<pre ><code>const classes = `header ${ isLargeScreen() ? '' : (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</code></pre> <p>ES2015에서 중첩된(nested) 템플릿 리터럴을 사용한 경우:</p> -<pre class="notranslate"><code>const classes = `header ${ isLargeScreen() ? '' : +<pre ><code>const classes = `header ${ isLargeScreen() ? '' : `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</code></pre> @@ -93,7 +93,7 @@ classes += (isLargeScreen() ? <p>template literals 의 더욱 발전된 한 형태는 <em>tagged</em> templates 입니다. 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있습니다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다. 결국 함수는 조작 된 문자열을 반환 할 수 있습니다 (또는 다음 예제에서 설명하는 것과 완전히 다른 결과를 반환 할 수 있습니다). function 이름은 원하는 어떤 것이든 가능합니다.</p> -<pre class="notranslate"><code>var person = 'Mike'; +<pre ><code>var person = 'Mike'; var age = 28; function myTag(strings, personExp, ageExp) { @@ -126,7 +126,7 @@ console.log(output); <p>다음 예시에서 보여지듯이, Tag function 들은 string 을 반환할 필요는 없습니다.</p> -<pre class="brush: js notranslate">function template(strings, ...keys) { +<pre class="brush: js ">function template(strings, ...keys) { return (function(...values) { var dict = values[values.length - 1] || {}; var result = [strings[0]]; @@ -148,7 +148,7 @@ t2Closure('Hello', {foo: 'World'}); // "Hello World!" <p>태그 지정된 템플릿의 첫 번째 함수 인수에서 사용할 수있는 특별한 <code>raw</code> property을 사용하면 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings">escape sequences</a> 처리하지 않고 원시 문자열을 입력 한대로 액세스 할 수 있습니다.</p> -<pre class="notranslate"><code>function tag(strings) { +<pre ><code>function tag(strings) { console.log(strings.raw[0]); } @@ -158,7 +158,7 @@ tag`string text line 1 \n string text line 2`; <p>추가로, default template function 과 string 병합으로 생성될 것 같은 raw string 을 생성하기 위한 {{jsxref("String.raw()")}} method가 존재합니다.</p> -<pre class="notranslate"><code>var str = String.raw`Hi\n${2+3}!`; +<pre ><code>var str = String.raw`Hi\n${2+3}!`; // "Hi\n5!" str.length; @@ -184,7 +184,7 @@ str.split('').join(','); <p>이는 다음과 같은 tagged template이 문제가 된다는 것을 의미하는데, ECMAScript문법에 따라, parser는 유효한 유니 코드 탈출 시퀀스가 있는지 확인하지만 형식이 잘못되었기 때문에 오류가 발생합니다.</p> -<pre class="notranslate"><code>latex`\unicode` +<pre ><code>latex`\unicode` // Throws in older ECMAScript versions (ES2016 and earlier) // SyntaxError: malformed Unicode character escape sequence</code></pre> @@ -194,7 +194,7 @@ str.split('').join(','); <p>그러나 illegal escape sequences는 여전히 "cooked"라고 표현되어야합니다. "cooked"배열의 {{jsxref ( "undefined")}} 요소로 나타납니다 :</p> -<pre class="notranslate"><code>function latex(str) { +<pre ><code>function latex(str) { return { "cooked": str[0], "raw": str.raw[0] } } |