문자열 (String)

이서림·2024년 7월 30일

JavaScript

목록 보기

7/28

문자열 (String)

텍스트 데이터를 나타내는 타입.
작은따옴표(’), 큰따옴표(”), 백틱()`으로 감싸서 표현

let str1 = 'hello world';
let str2 = "hello world";
let str3 = `hello world`;
console.log(typeof str1, typeof str2, typeof str3);

💡 이스케이프 문자

따옴표로 작성한 문자열 안에서 줄바꿈이나, 따옴표를 표현하기 위해서는 이스케이프 문자를 활용.

const str = '문자열 작성법\n따옴표(\') 또는 쌍따옴표로(")로 텍스트를 감쌉니다.'

String - JavaScript | MDN

템플릿 리터럴이란?

백틱(`)을 이용해 문자열을 나타내는 표기법. ES6에 도입. 자바스크립트 표현식을 문자열 안에 포함할 수 있음.

let a = 10;
let b = 20;
console.log(a + " + " + b + " = " + (a + b));
// 템플릿 리터럴을 사용하여 표현식 삽입

console.log(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> + </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a <span class="token operator">+</span> b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">);

기존 문자열과 달리 개행도 표현할 수 있음.

const str = `안녕하세요!
이것은 문자열입니다`;

문자열의 특징

순서는 0부터 시작하며 띄어쓰기도 문자로 취급. 이 순서를 인덱스(index)라고 부르며, 각괄호([])를 사용해 특정 위치의 문자를 가져옴.
```
let greeting = 'hello world';
console.log(greeting[4]);
console.log(greeting[5]);
console.log(greeting[20]);
```
💡 ES2022부터는 at 메서드를 사용하여 음수값으로 요소에 접근할 수 있음. ```jsx greeting.at(-1); ```
문자열은 length라는 속성을 가지며, length 속성을 이용하여 문자열의 길이를 구할 수 있음.
```
let myPassword = "qwer123!@#";
console.log(myPassword.length);
```
원시타입의 특징인 불변성(immutable)을 가지고 있기 때문에, 한 번 만들어진 문자열은 절대 변하지 않음.
```
let str = "immutable";
str[0] = 'l'; 
console.log(str);
// immutable
str.toUpperCase();

console.log(str);

// immutable
```

문자열 메서드

메서드란? 객체의 속성으로 존재하는 함수

indexOf()
문자열 안에 존재하는 특정한 문자를 검색하여 문자의 인덱스를 반환.
1. 검색할 문자와 검색을 시작할 인덱스 번호 두 가지를 인자로 전달 .
2. 문자열 안에 검색하고자하는 문자가 존재하지 않으면 -1을 반환.

```jsx
const str = "Hello world, Hello weniv!";
console.log(str.indexOf('Hello'));  // 0

console.log(str.indexOf('weniv'));  // 18

console.log(str.indexOf('Hello', 6)); // 13

console.log(str.indexOf('licat')); // -1
</li>
<li>
<p><strong>lastIndexOf()</strong><br>
문자를 검색하는 순서가 indexOf()와 정반대.  검색의 순서가 바뀐다고 해서 인덱스 번호도 바뀌는것은 아님.</p>
<pre><code class="language-null">```jsx
const str = "Hello world, Hello weniv!";

console.log(str.lastIndexOf('Hello')); // 13
console.log(str.lastIndexOf('weniv'));  // 18
console.log(str.lastIndexOf('Hello', 12)); // 0
console.log(str.lastIndexOf('licat')); // -1
```</code></pre>
</li>
<li>
<p><strong>includes()</strong></p>
<p>문자열이 포함되어 있는지를 판별. true와 false로 반환.</p>
<pre><code class="language-jsx"><span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"Hello world, Hello weniv!"</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false (대소문자 구분)</span></code></pre>
</li>
<li>
<p><strong>match()</strong></p>
<p>문자열에서 정규표현식과 일치하는 부분을 검색하고, 일치하는 값들을 배열로 반환. 일치하는 값이 없으면 null을 반환.</p>
<pre><code class="language-jsx"><span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"Hello World, Hello Weniv!"</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[A-Z]/g</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["H", "W", "H", "W"]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[0-9]/g</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// null (숫자 없음)</span>
</code></pre>
</li>
<li>
<p><strong>substring()</strong><br>
문자열의 지정한 인덱스에서 시작하여 다른 인덱스 바로 전까지의 부분 문자열을 반환<br>
1. 첫 번째 인자로 시작 인덱스를 지정.<br>
2. 두 번째 인자(옵션)로 종료 인덱스를 지정</p>
<pre><code class="language-null">```jsx
const str = "Hello weniv!";

console.log(str.substring(6)); // "weniv!"
console.log(str.substring(-3));  // "Hello weniv!" (음수는 0으로 취급)

console.log(str.substring(2, -3)); // "llo wen"
```</code></pre>
</li>
<li>
<p><strong>slice()</strong></p>
<p>문자열의 지정한 인덱스에서 시작하여 다른 인덱스까지의 부분 문자열을 반환. 시작 인덱스와 종료 인덱스를 인자로 전달. 종료 인덱스는 옵션이며 기본값은 문자열의 길이(.length) . 음수 인덱스도 허용.</p>
<pre><code class="language-jsx"><span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"Hello weniv!"</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// "weniv!"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// "iv!"</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "weniv!"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "" (시작 인덱스가 종료 인덱스보다 크면 빈 문자열 반환)</span></code></pre>

💡 **substring과 slice**
<ol>
<li>
<p>시작 인덱스가 끝 인덱스보다 큰 경우 substring은 두 값을 바꾸어 실행.</p>
<pre><code class="language-jsx"><span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"Hello weniv!"</span><span class="token punctuation">;</span>

str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
str<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// lo w</span>
str<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</li>
<li>
<p>음수 값이 인수로 들어올 때, substring은 0으로 바꾸어 실행되고, slice는 음수 인덱스로 인식. 숫자가 아닌 값이 들어오는 경우 substring과 slice 모두 0으로 바꾸어 실행.</p>
<pre><code class="language-jsx">str<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre>
</li>
</ol>

</li>
<li>
<p><strong>substr()</strong><br>
substr은 시작 인덱스와 길이를 인자로 받음. 음수 인덱스가 허용되며, 길이가 음수거나 0이면 빈 문자열을 반환하고, 길이가 생략된 경우에는 문자열의 끝까지 반환.</p>
<pre><code class="language-null">```jsx
const str = "Hello weniv!";

console.log(str.substr(4, 5)); // "o wen"
console.log(str.substr(6)); // "weniv!"
```</code></pre>
</li>
<li>
<p><strong>split()</strong></p>
<p>문자열을 쪼개어 각각의 값을 원소로 하는 배열을 반환. 두 번째 인자로 나눌 갯수를 전달 할 수 있으며, 구분자가 빈 문자열이라면 문자열 하나하나가 모두 쪼개진 배열이 반환됩니다.</p>
<pre><code class="language-jsx">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"010-1234-1234"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">"-"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["010", "1234", "1234"]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"apple"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["a", "p", "p", "l", "e"]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"apple banana watermelon strawberry"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">" "</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ["apple", "banana"]</span></code></pre>
</li>
<li>
<p><strong>replace()</strong><br>
문자열에서 일치하는 첫번째 문자열을 찾고, 대체하여 새로운 문자열을 반환. 첫 번째 인자는 찾아야하는 문자열, 두 번째 인자는 대체할 값을 전달. 정규표현식 지원하며 이를 이용해 g플래그를 사용하면 일치하는 모든 부분을 대체.</p>
<pre><code class="language-null">```jsx
console.log("Hello world, Hello weniv!".replace("Hello", "Hi")); // "Hi world, Hello weniv!" , 문자열에서 첫 번째로 등장하는 "Hello"를 "Hi"로 대체
console.log("Hello world,\n\tHello weniv!".replace(/\s/g, "")); // "Helloworld,Helloweniv!" , 모든 공백 문자(스페이스, 탭, 개행 등)을 찾아 제거
```</code></pre>
</li>
<li>
<p><strong>replaceAll()</strong></p>
<p>문자열에서 모든 일치하는 부분을 새로운 문자열로 대체합니다.</p>
<pre><code class="language-jsx">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello world, Hello weniv!"</span><span class="token punctuation">.</span><span class="token function">replaceAll</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">,</span> <span class="token string">"Hi"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// "Hi world, Hi weniv!"</span>
</code></pre>
</li>
<li>
<p><strong>toLowerCase(), toUpperCase()</strong></p>
<p>문자열을 소문자, 혹은 대문자로 변환한 새로운 문자열을 생성하여 반환합니다.</p>
<pre><code class="language-jsx"><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'I want to go home!'</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "i want to go home!"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "I WANT TO GO HOME!"</span></code></pre>
</li>
<li>
<p><strong>repeat()</strong></p>
<p>문자열을 지정된 횟수만큼 반복한 새로운 문자열을 반환</p>
<pre><code class="language-jsx">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//*****</span></code></pre>
</li>
<li>
<p><strong>trim()</strong></p>
<p>문자열 앞 뒤의 공백을 제거합니다.</p>
<pre><code class="language-jsx">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"         licat  "</span><span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "licat"</span></code></pre>
</li>
<li>
<p><strong>padStart()</strong></p>
<p>자릿수에 맞춰 인자로 전달받은 문자열을 채웁니다. 패딩에 사용할 문자열을 지정하지 않는 경우 공백으로 채워집니다.</p>
<pre><code class="language-jsx"><span class="token keyword">const</span> month <span class="token operator">=</span> <span class="token string">'7'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>month<span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// '07'</span>
<span class="token comment">// '7'을 2자리 채웁니다. 부족한 부분은 0으로 채웁니다.</span>
</code></pre>
</li>
</ol></div>

이서림

꾸준한 열정으로 나아가는 프론트엔드 개발자

이전 포스트

Type과 원시타입

다음 포스트

문자열 (String)

JavaScript

문자열 (String)

템플릿 리터럴이란?

문자열의 특징

문자열 메서드

Type과 원시타입

숫자 (Number)

0개의 댓글