path: root/files/ko/web/javascript/guide/text_formatting/index.html

---
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>