--- title: String slug: Web/JavaScript/Reference/Global_Objects/String tags: - ECMAScript 2015 - JavaScript - Reference - String translation_of: Web/JavaScript/Reference/Global_Objects/String --- <div>{{JSRef}}</div> <p><strong><code>String</code></strong> 전역 객체는 문자열(문자의 나열)의 생성자입니다.</p> <h2 id="Syntax" name="Syntax">구문</h2> <p>문자열 리터럴은 다음과 같은 형식을 사용합니다.</p> <pre class="syntaxbox">'string text' "string text" "中文 español Deutsch English देवनागरी العربية português বাংলা русский 日本語 norsk bokmål ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre> <p>문자열은 <code>String</code> 전역 객체를 직접 사용하여 생성할 수 있습니다.</p> <pre class="syntaxbox">String(<em>thing</em>)</pre> <h3 id="매개변수">매개변수</h3> <dl> <dt><code>thing</code></dt> <dd>문자열로 변환할 아무 값.</dd> <dt> <h3 id="템플릿_리터럴">템플릿 리터럴</h3> </dt> </dl> <p>ECMAScript 2015 이후, 문자열 리터럴은 소위 <a href="/ko/docs/Web/JavaScript/Reference/Template_literals">템플릿 리터럴</a>이 될 수 있습니다.</p> <pre class="language-html"><code class="language-html">`hello world` `hello! world!` `hello ${who}` tag `<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span><span class="punctuation token">></span></span>${who}<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span>`</code></pre> <h3 id="이스케이프_표현">이스케이프 표현</h3> <p>일반적인 출력 문자 외의 특수 문자는 이스케이프 표현을 사용해 적을 수 있습니다.</p> <table class="standard-table"> <thead> <tr> <th scope="col">코드</th> <th scope="col">출력</th> </tr> </thead> <tbody> <tr> <td><code>\XXX</code></td> <td>8진수 Latin-1 문자</td> </tr> <tr> <td><code>\'</code></td> <td>작은따옴표</td> </tr> <tr> <td><code>\"</code></td> <td>큰따옴표</td> </tr> <tr> <td><code>\\</code></td> <td>역슬래시</td> </tr> <tr> <td><code>\n</code></td> <td>개행</td> </tr> <tr> <td><code>\r</code></td> <td>캐리지 리턴</td> </tr> <tr> <td><code>\v</code></td> <td>세로 탭</td> </tr> <tr> <td><code>\t</code></td> <td>탭</td> </tr> <tr> <td><code>\b</code></td> <td>백 스페이스</td> </tr> <tr> <td><code>\f</code></td> <td>폼 피드</td> </tr> <tr> <td><code>\uXXXX</code></td> <td>유니코드 코드포인트</td> </tr> <tr> <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> <td>유니코드 코드포인트 {{experimental_inline}}</td> </tr> <tr> <td><code>\xXX</code></td> <td>Latin-1 문자</td> </tr> </tbody> </table> <div class="note"> <p>일부 다른 프로그래밍 언어와 달리, JavaScript는 작은따옴표와 큰따옴표 문자열을 구분하지 않습니다. 따라서 위의 이스케이프 문자는 작은따옴표나 큰따옴표에서 상관 없이 작동합니다.</p> </div> <h3 id="긴_문자열_리터럴">긴 문자열 리터럴</h3> <p>작성한 코드가 매우 긴 문자열을 포함해야 하는 경우, 끝 없이 뻗어나가는 한 줄이나 편집기의 재량에 따라 자동으로 줄을 넘기는 대신 직접 여러 줄로 나누되 내용에는 영향을 주지 않고 싶을 때가 있을겁니다. 이런 상황에는 두 가지 방법을 사용할 수 있습니다.</p> <p>우선 다음과 같이 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#%EB%8D%94%ED%95%98%EA%B8%B0_()">+</a> 연산자를 사용할 수 있습니다.</p> <pre class="brush: js"><code>let longString = "여러 줄에 걸쳐 작성해야 할 정도로 " + "긴 문자열인데 왜 한 줄에 다 적으면 안되냐면 " + "코드를 읽기 힘들어지니까요.";</code></pre> <p>아니면 역슬래시 문자("\")를 각 줄의 맨 끝에 붙여 문자열이 이어진다는걸 표시할 수도 있습니다. 역슬래시 다음에 공백을 포함한 어떤 문자라도 붙으면 제대로 작동하지 않으므로 주의해야 합니다.</p> <pre class="brush: js"><code>let longString = "여러 줄에 걸쳐 작성해야 할 정도로 \ 긴 문자열인데 왜 한 줄에 다 적으면 안되냐면 \ 코드를 읽기 힘들어지니까요.";</code></pre> <p>두 예시 모두 동일한 문자열을 생성합니다.</p> <h2 id="Description" name="Description">설명</h2> <p>문자열은 텍스트 형태로 표현될 수있는 데이터를 보관하는 데 유용합니다. 문자열에서 가장 많이 사용되는 작업들은 문자열의 길이를 확인하는 ({{jsxref("String.length", "length")}}), 문자열을 생성하고 연결하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/String_Operators" title="JavaScript/Reference/Operators/String_Operators">+ 와 += 문자열 연산자</a>, 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인하는 {{jsxref("String.prototype.indexOf()", "indexOf()")}} 메서드, 서브문자열(substring)을 추출해내는 {{jsxref("String.prototype.substring()", "substring()")}} 메서드가 있습니다.</p> <h3 id="문자_접근">문자 접근</h3> <p>문자열에서 개개의 문자에 접근할 수 있는 방법은 두가지가 있습니다. 첫번째는 {{jsxref("String.prototype.charAt()", "charAt()")}} 메서드를 이용하는 것입니다:</p> <pre class="brush: js">return 'cat'.charAt(1); // returns "a" </pre> <p>다른 방법(ECMAScript 5에서 소개하고 있는)은 문자열을 배열과 같은 오브젝트로 취급하여, 문자에 해당하는 숫자 인덱스를 사용하는 방법입니다 :</p> <pre class="brush: js">return 'cat'[1]; // returns "a" </pre> <p>브라켓([ ]) 표기법을 사용하여 문자에 접근하는 경우 , 이러한 프로퍼티들에 새로운 값을 할당하거나 삭제할 수는 없습니다. 포함되어 있는 프로퍼티들은 작성할 수도, 수정할 수도 없습니다. (더 자세한 정보는 {{jsxref("Object.defineProperty()")}}를 참고 바랍니다 .)</p> <h3 id="Comparing_strings" name="Comparing_strings">문자열 비교</h3> <p>C 개발자는 문자열 비교를 위하여 <code><span style="font-family: courier new,andale mono,monospace;">strcmp()</span></code> 함수를 사용합니다. JavaScript에서는 단지 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" style="line-height: inherit;" title="JavaScript/Reference/Operators/Comparison_Operators">less-than와 greater-than 연산자</a>만을 사용하여 문자열을 비교할 수 있습니다<span style="line-height: inherit;"> </span><span style="line-height: inherit;">:</span></p> <pre class="brush: js">var a = "a"; var b = "b"; if (a < b) { // true console.log(a + " is less than " + b); } else if (a > b) { console.log(a + " is greater than " + b); } else { console.log(a + " and " + b + " are equal."); } </pre> <p>비슷한 결과를 얻을 수 있는 방법으로 <span style="font-family: courier new,andale mono,monospace;">String</span> 인스턴스에서 상속된 {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} 메서드를 사용할 수 있습니다.</p> <h3 id="문자열_원형과_String_객체의_차이">문자열 원형과 <code>String</code> 객체의 차이</h3> <div>JavaScript는 <code>String</code> 오브젝트와 원형의 문자열을 다르게 취급한다는 것에 주의해야 합니다. ({{jsxref("Boolean")}}과 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects" title="JavaScript/Reference/Global_Objects/">숫자</a>의 true도 마찬가지입니다.)</div> <div> </div> <p>문자열 리터럴(작은 따옴표 또는 큰 따옴표로 생성되는)과 생성자 없이(즉. {{jsxref("Operators/new", "new")}} 키워드를 사용하지 않고) <code>String</code>을 호출하여 반환된 문자열은 원형 문자열(primitive strings)입니다. JavaScript는 자동적으로 원형을 <code>String</code> 오브젝트로 변환하기 때문에, <code>String</code> 오브젝트 메서드를 사용하여 원형문자열을 생성할 수 있습니다. 문맥 안의 메서드에서 프로퍼티 조회 또는 원형의 문자열 호출이 발생하면, JavaScript는 자동으로 문자열 원형을 감싸고 프로퍼티 조회를 수행 하거나 메서드를 호출합니다.</p> <pre class="brush: js">var s_prim = "foo"; var s_obj = new String(s_prim); console.log(typeof s_prim); // Logs "string" console.log(typeof s_obj); // Logs "object" </pre> <p>문자열 원형과 <code>String</code> 오브젝트는 {{jsxref("Global_Objects/eval", "eval()")}}을 사용할 때 다른 결과를 제공합니다. <code>eval</code>에 전달되는 문자열 원형들은 소스 코드 취급을 받습니다; <code>String</code> 오브젝트들은 다른 모든 오브젝트들과 마찬가지로 취급하며, 오브젝트를 반환합니다. 예를 들면:</p> <pre class="brush: js">var s1 = '2 + 2'; // creates a string primitive var s2 = new String('2 + 2'); // creates a String object console.log(eval(s1)); // returns the number 4 console.log(eval(s2)); // returns the string "2 + 2" </pre> <p>이러한 이유로, 비록 코드 상에서 원형 문자열을 사용하는 대신에 <code>String</code> 오브젝트를 사용하게 되면 코드가 손상될 수 있지만, 일반적인 개발자는 차이를 걱정할 필요는 없습니다.</p> <p><code>String</code><span style="line-height: inherit;"> 오프젝트는 언제든지 </span>{{jsxref("String.prototype.valueOf()", "valueOf()")}} <span style="line-height: inherit;"> 메서드로 원형에 대응하도록 전환할 수 있습니다.</span></p> <pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 </pre> <h2 id="Properties" name="Properties">속성</h2> <dl> <dt>{{jsxref("String.prototype")}}</dt> <dd>String 오브젝트는 프로퍼티의 추가가 가능합니다.</dd> </dl> <h2 id="Methods" name="Methods">메서드</h2> <dl> <dt>{{jsxref("String.fromCharCode()")}}</dt> <dd>지정된 유니코 값의 순서를 이용하여 만든 문자열을 반환합니다.</dd> <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> <dd>지정된 코드 포인트 순서를 이용하여 만든 문자열을 반환합니다.</dd> <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> <dd>원형 템플릿 문자열(raw template string)에서 생성된 문자열을 반환합니다.</dd> </dl> <h2 id="String_generic_메서드"><code>String</code> generic 메서드</h2> <div class="warning"> <p><strong><code>String</code> generic들은 비표준으로, 가까운 미래에 사라질 것입니다.</strong> 아래에서 제공하고 있는 방식을 사용하지 않으면, 브라우저들간의 호환성은 기대하기 어렵습니다. </p> </div> <p><code>String</code><span style="line-height: inherit;"> 인스턴스 메서드는 JavScript 1.6으로 Firefox에서(ECMAScript 표준에 속하지는 않지만) 어떤 오브젝트라도 String 메서드에 적용하여 String 오브젝트에서 사용가능합니다:</span></p> <pre class="brush: js">var num = 15; console.log(String.replace(num, /5/, '2')); </pre> <p class="brush: js">{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}}은<span style="line-height: inherit;"> </span>{{jsxref("Global_Objects/Array", "Array")}}<span style="line-height: inherit;"> 메서드에도 사용 가능합니다.</span></p> <h2 id="String_instances" name="String_instances"><code>String</code> 인스턴스</h2> <h3 id="속성">속성</h3> <p>{{ page('ko/docs/JavaScript/Reference/Global_Objects/String/prototype', 'Properties') }}</p> <h3 id="메서드">메서드</h3> <h4 id="HTML과_관계없는_메서드">HTML과 관계없는 메서드</h4> <p>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</p> <h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> <p>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</p> <h2 id="예제">예제</h2> <h3 id="문자열_변환">문자열 변환</h3> <p>비록 일반적으로 toString() 함수를 많이 사용하고 있지만, {{jsxref("String.prototype.toString()", "toString()")}}의 "안전한" 대안으로 String을 사용할 수 있습니다. String은 {{jsxref("Global_Objects/null", "null")}}과 {{jsxref("Global_Objects/undefined", "undefined")}}에 대해서도 잘 동작합니다. 예를 들면: </p> <pre class="brush: js">var outputStrings = []; for (var i = 0, n = inputValues.length; i < n; ++i) { outputStrings.push(String(inputValues[i])); } </pre> <h2 id="Browser_Compatibility" name="Browser_Compatibility">명세</h2> <table class="standard-table"> <tbody> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> <tr> <td>{{SpecName('ES1')}}</td> <td>{{Spec2('ES1')}}</td> <td>Initial definition.</td> </tr> <tr> <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> <td>{{Spec2('ES5.1')}}</td> <td> </td> </tr> <tr> <td>{{SpecName('ES6', '#sec-string-objects', 'String')}}</td> <td>{{Spec2('ES6')}}</td> <td> </td> </tr> <tr> <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> <td>{{Spec2('ESDraft')}}</td> <td> </td> </tr> </tbody> </table> <h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> <p>{{Compat("javascript.builtins.String",2)}}</p> <h2 id="같이_보기">같이 보기</h2> <ul> <li>{{domxref("DOMString")}}</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> </ul>