initial commit

1 files changed, 275 insertions, 0 deletions

diff --git a/files/ko/web/javascript/guide/text_formatting/index.html b/files/ko/web/javascript/guide/text_formatting/index.html
new file mode 100644
index 0000000000..027e92c262
--- /dev/null
+++ b/files/ko/web/javascript/guide/text_formatting/index.html
@@ -0,0 +1,275 @@
+---
+title: 텍스트 서식
+slug: Web/JavaScript/Guide/Text_formatting
+translation_of: Web/JavaScript/Guide/Text_formatting
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
+
+<p class="summary">이 장에서는 JavaScript에서 문자열과 텍스트로 작업하는 방법을 소개합니다.</p>
+
+<h2 id="문자열">문자열</h2>
+
+<p> JavaScript의 {{Glossary("문자열")}} 유형은 원문의 데이터를 나타내는데 사용됩니다. 이는 16비트 부호 없는 정수 값(UTF-16 code units)의 "요소" 집합입니다. String의 각 요소(문자)는 String에서 하나의 위치를 차지합니다. 첫 번째 요소는 인덱스 0 다음은 인덱스 1 등등... 문자열의 길이는 요소의 수와 같습니다. 문자열 리터럴 또는 문자열 객체를 사용하여 문자열을 만들 수 있습니다.</p>
+
+<p> </p>
+
+<p>주의 : 이페이지를 수정한다면 MDN bug 857438이 해결될 때 까지 U+FFFF이상의 문자를 포함하지 마세요. ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857438">https://bugzilla.mozilla.org/show_bug.cgi?id=857438</a> ).</p>
+
+<h3 id="문자열_리터럴">문자열 리터럴</h3>
+
+<p>작은따옴표나 큰따옴표를 사용하여 간단한 문자열을 만들 수 있습니다:</p>
+
+<pre class="brush: js">'foo'
+"bar"</pre>
+
+<p>보다 많은 문자열을 이스케이프 시퀀스를 사용하여 만들 수 있습니다</p>
+
+<h4 id="16진수_이스케이프_시퀀스">16진수 이스케이프 시퀀스</h4>
+
+<p>\x 뒤에 수는 <a href="https://en.wikipedia.org/wiki/Hexadecimal">16진수</a>로 해석(interpreted)됩니다.</p>
+
+<pre class="brush: js">'\xA9' // "©"
+</pre>
+
+<h4 id="유니코드_이스케이프_시퀀스">유니코드 이스케이프 시퀀스</h4>
+
+<p>유니코드 이스케이프 시퀀스는 \u 다음에 적어도 네 개의 16진수 숫자(digit)를 필요로 합니다.</p>
+
+<pre class="brush: js">'\u00A9' // "©"</pre>
+
+<h4 id="유니코드_코드_포인트_이스케이프">유니코드 코드 포인트 이스케이프</h4>
+
+<p>ECMAScript 6의 새로운 기능. 유니 코드 포인트 이스케이프를 사용하면 16 진수를 사용하여 모든 문자를 이스케이프 처리 할 수 ​​있으므로 최대 <code>0x10FFFF</code>의 유니 코드 코드 포인트를 사용할 수 있습니다. 간단한 유니 코드 이스케이프를 사용하면 동일한 결과를 얻기 위해서 서로 게이트를 별도로 작성해야하는 경우가 있습니다.</p>
+
+<p>{{jsxref("String.fromCodePoint()")}} 나 {{jsxref("String.prototype.codePointAt()")}}를 참고하세요.</p>
+
+<pre class="brush: js">'\u{2F804}'
+
+// the same with simple Unicode escapes
+'\uD87E\uDC04'</pre>
+
+<h3 id="문자열_개체">문자열 개체</h3>
+
+<p>{{jsxref("문자열")}} 개체<span>는 문자열 기본 데이터 형식의 래퍼입니다.</span></p>
+
+<pre class="brush: js">var s = new String("foo"); // Creates a String object
+console.log(s); // Displays: { '0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Returns 'object'
+</pre>
+
+<p>여러분은 문자열 리터럴 값에 문자열 개체의 방법 중 하나를 호출 할 수 있습니다.—JavaScript가 자동으로 문자열 리터럴을 임시 문자열 개체로 변환하고, 메서드를 호출하고, 그리고나서 임시 문자열 개체를 삭제합니다. 또한, <code>String.length</code> 속성을 문자열 리터럴과 함께 사용할 수 있습니다.</p>
+
+<p>특별히 <code>String</code> 개체를 사용할 필요가 없지 않는 한, <code>String</code> 개체는 직관에 반하는 행동을 할 수 있기 때문에 여러분은 string 리터럴을 사용해야합니다. 예를들어:</p>
+
+<pre class="brush: js">var s1 = "2 + 2"; // Creates a string literal value
+var s2 = new String("2 + 2"); // Creates a String object
+eval(s1); // Returns the number 4
+eval(s2); // Returns the string "2 + 2"</pre>
+
+<p><span class="atn">문자열 개체</span><span>는</span> <span class="atn hps">문자열</span><span>의 문자 수를</span> <span class="hps">나타내는</span> <span class="atn hps">하나의 속성</span><span>,</span> <span class="atn hps">길이</span><span class="atn">를 갖습니다</span><span>.</span> 예를 들어, "Hello, World!"가 13자 이므로 다음 코드는 <span class="hps">x를 값 13으로 할당합니다. <code>String</code> 객체는 문자열에있는 UTF-16 코드 단위의 수를 나타내는 길이가 하나의 속성을 가집니다. 예를 들어, 다음 코드에서는 "Hello, World!"가 UTF-16 코드 단위로 표현되는 13개의 문자를 가지고 있기 때문에 x 값이 13이 됩니다. 배열 브래킷 스타일을 사용하여 각 코드 단위에 액세스 할 수 있습니다. 문자열은 변경 불가능한 배열과 같은 객체이기 때문에 개별 문자를 변경할 수 없습니다.</span></p>
+
+<pre><code>var mystring = 'Hello, World!';
+var x = mystring.length;
+mystring[0] = 'L'; // This has no effect, because strings are immutable
+mystring[0]; // This returns "H"</code></pre>
+
+<p>유니 코드 스칼라 값이 U + FFFF (희귀 한 중국어 / 일본어 / 한국어 / 베트남어 문자 및 일부 이모티콘)보다 큰 문자는 각각 서로 다른 두 개의 코드 단위로 UTF-16에 저장됩니다. 예를 들어, 단일 문자 U + 1F600 "Emoji grinning face"를 포함하는 문자열은 길이가 2입니다. 대괄호를 사용하여 이러한 문자열의 개별 코드 단위에 액세스하면 일치하지 않는 대리 코드 단위가있는 문자열이 만들어지는 등의 바람직하지 않은 결과가 발생할 수 있습니다. 유니 코드 표준 위반 MDN 버그 857438이 수정 된 후에 예제가 이 페이지에 추가되어야합니다. {{jsxref ( "String.fromCodePoint ()")}} 또는 {{jsxref ( "String.prototype.codePointAt ()")}}도 참조하십시오.</p>
+
+<p><code>String</code> 객체는 다양한 메서드가 있습니다: 문자열 자체의 변경된 결과를 반환하는 <code>substring</code>과 <code>toUpperCase</code>가 그것!</p>
+
+<p>다음 표는 {{jsxref("문자열")}} 개체의 메서드를 요약한 것입니다.</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="문자열_메서드">문자열 메서드</h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td>
+   <td>
+    <p>문자열에서 지정된 위치에 있는 문자나 문자 코드를 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td>
+   <td>
+    <p>문자열에서 지정된 부분 문자열의 위치나 지정된 부분 문자열의 마지막 위치를 각각 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td>
+   <td>
+    <p>문자열 시작하고, 끝나고, 지정된 문자열을 포함하는지의 여부를 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.concat", "concat")}}</td>
+   <td>
+    <p>두 문자열의 텍스트를 결합하고 새로운 문자열을 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td>
+   <td>
+    <p>유니코드 값의 지정된 시퀀스로부터 문자열을 구축합니다. 문자열 인스턴스가 아닌 문자열 클래스의 메서드입니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>
+    <p>부분 문자열로 문자열을 분리하여 문자열 배열로 문자열 개체를 분할합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.slice", "slice")}}</td>
+   <td>
+    <p>문자열의 한 부분을 추출하고 새 문자열을 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td>
+   <td>
+    <p><span class="hps">어느</span> <span class="hps">시작 및 종료</span> <span class="hps">인덱스</span> <span class="hps">또는</span> <span class="hps">시작 인덱스</span> <span class="hps">및</span> <span class="atn hps">길이</span><span class="atn">를 지정하여, </span><span class="hps">문자열의</span> <span class="hps">지정된</span> <span class="hps">일부를</span> <span class="hps">반환합니다.</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td>
+   <td>
+    <p><span class="atn hps">정규 표현식</span><span>으로</span> <span class="hps">작업합니다.</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.toLowerCase", "toLowerCase")}},<br>
+    {{jsxref("String.toUpperCase", "toUpperCase")}}</td>
+   <td>
+    <p>.<span class="hps">모든</span><span class="hps"> 소문자</span> <span class="hps">또는</span><span class="atn hps"> 대문자에서 각각 문자열을 반환합니다.</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.normalize", "normalize")}}</td>
+   <td><span class="hps">호출</span> <span class="atn hps">문자열 값</span><span>의</span> <span class="hps">유니 코드 표준화</span> <span class="atn hps">양식</span><span>을 반환합니다.</span></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.repeat", "repeat")}}</td>
+   <td>
+    <p>주어진 회를 반복하는 개체 요소로 이루어진 문자열을 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.trim", "trim")}}</td>
+   <td><span class="atn hps">문자열</span><span class="atn">의 시작과 끝</span><span>에서</span> <span class="hps">공백을</span> <span class="atn hps">자릅니다</span><span>.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="다중_선_템플릿_문자열">다중 선 템플릿 문자열</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">템플릿 문자열</a>은 포함 식을 용납하는 문자열 리터럴입니다. 여러분은 그것들과 함께 다중 선 문자열 및 문자열 보간 기능을 사용할 수 있습니다.</p>
+
+<p>템플릿 문자열은 작은따옴표나 큰따옴표 대신에 back-tick (` `) (<a class="external external-icon" href="https://en.wikipedia.org/wiki/Grave_accent">grave accent</a>)문자로 묶습니다.<span> </span><span class="hps">템플릿</span> <span class="hps">문자열은</span> <span class="hps">자리 표시자를 </span><span>포함 할 수 있습니다</span>. <span class="hps">이들은</span> <span class="atn hps">달러 기호</span><span>와</span> <span class="atn hps">중괄호</span><span>로 표시됩니다</span>.  (<code>${expression}</code>)</p>
+
+<h4 id="다중_선">다중 선</h4>
+
+<p>소스에 삽입하는 새로운 선 문자는 템플릿 문자열의 일부입니다. 정상적인 문자열을 사용하면, 여러분은 다중 선 문자열을 얻기 위해 다음과 같은 구문을 사용해야합니다:</p>
+
+<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>다중 선 문자열과 같은 효과를 얻기 위해, 여러분은 이제 쓸 수 있습니다:</p>
+
+<pre class="brush: js">console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+// string text line 2"</pre>
+
+<h4 id="포함식">포함식</h4>
+
+<p>일반 문자열 내에서 표현식을 포함하기 위해, 다음과 같은 구문을 사용합니다:</p>
+
+<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
+// not 20."</pre>
+
+<p>이제, 템플릿 문자열을 가지고, 여러분은 읽기와 같이 대체를 만드는 syntactic sugar의 사용을 할 수 있습니다:</p>
+
+<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
+// not 20."</pre>
+
+<p>자세한 내용은 <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript 참조</a>에서 <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">템플릿 문자열</a>에 대해 읽어보세요.</p>
+
+<h2 id="국제화">국제화</h2>
+
+<p>{{jsxref("Intl")}} 개체는  ECMA스크립트 국제 API에 언어와 문자열과 숫자서식과 날짜와 시간서식을 제공하는 명칭공간입니다.  {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, 와 {{jsxref("DateTimeFormat")}} 개체들을 위한 생성자들은  <code>Intl</code> 개체의 특성들입니다.</p>
+
+<h3 id="날짜와_시간서식">날짜와 시간서식</h3>
+
+<p>{{jsxref("DateTimeFormat")}} 개체는 날짜와 시간을 서식하기에 유용합니다. 다음 코드는 미국에서 쓰이는 영어로 날짜를 서식합니다. (결과는 다른 시간대와 다릅니다)</p>
+
+<pre class="brush: js">var msPerDay = 24 * 60 * 60 * 1000;
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
+
+var options = { year: "2-digit", month: "2-digit", day: "2-digit",
+                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+var americanDateTime = new Intl.DateTimeFormat("en-US", options).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+</pre>
+
+<h3 id="숫자_서식">숫자 서식</h3>
+
+<p>{{jsxref("NumberFormat")}}개체는 통화를 위해 숫자를 서식하는것에 대해 유용하다.</p>
+
+<pre class="brush: js">var gasPrice = new Intl.NumberFormat("en-US",
+                        { style: "currency", currency: "USD",
+                          minimumFractionDigits: 3 });
+
+console.log(gasPrice.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
+                        { style: "currency", currency: "CNY" });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
+</pre>
+
+<h3 id="조합">조합</h3>
+
+<p>{{jsxref("Collator")}}개체는 문자열을 비교하고 구분하는 것에 대해 유용합니다.</p>
+
+<p>예를 들어, 실제로 독일에선 phonebook과 dictionary라는 2개의 다른 종류의 명령어들이 있습니다. 전화기록부류는 소리를 강조합니다. 그리고 구분에 앞서 다른것들은 “ä”, “ö”인것처럼 "ae", "oe"로 확장됐습니다. </p>
+
+<pre class="brush: js">var names = ["Hochberg", "Hönigswald", "Holzman"];
+
+var germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk");
+
+// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(germanPhonebook.compare).join(", "));
+// logs "Hochberg, Hönigswald, Holzman"
+</pre>
+
+<p>어떤 독일말들은 여분의 변모음과 함께 활용한다. 그래서 사전안에서 이것은 변모음을 무시하라고 명령하기에 실용적이다.</p>
+
+<pre class="brush: js">var germanDictionary = new Intl.Collator("de-DE-u-co-dict");
+
+// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(germanDictionary.compare).join(", "));
+// logs "Hochberg, Holzman, Hönigswald"
+</pre>
+
+<p>{{jsxref("Intl")}}API에 대한 자세한 내용은 <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API</a>를 참조하세요.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</p>