Part 1. JavaScript 기초 Ch 3-2. 문자열

Part 1. JavaScript 기초 Ch 3-2. 문자열 입니다.

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

• length 속성을 활용해 문자열의 길이를 확인할 수 있다.
• 두 개 이상의 문자열을 하나의 문자열로 만들 수 있다.
• slice()메서드를 활용해 문자열을 원하는 만큼 '복사'할 수 있다.
• 영문으로 된 문자열을 대문자 또는 소문자로 바꿀 수 있다.
• 문자열 중 원하는 문자의 index를 찾고 접근할 수 있다. str.indexOf('a') 또는 str.lastIndexOf('a'), srt[1]
• split(), join()메서드를 활용해 문자열을 배열로 바꾸거나, 배열을 문자열로 바꿀 수 있다.
• 템플릿 리터럴(Template literals)문법을 사용할 수 있다.

1. 문자로의 접근(Accessing a character)

문자열은 string입니다. 문자 하나는 character이며, char이라는 축약어로 부르기도 합니다.

• str[index]

let str = 'Student';
console.log(str[0]); // 'S'
console.log(str[4]); // 'e'
console.log(str[10]); // undefined

str[0] = 'D';
console.log(str) // 'Student'
// 문자열은 index로 접근은 가능하지만 값을 변경할 순 없습니다.

2. 문자열의 결합(Concatenating strings)

• +연산자 사용이 가능합니다. (-연산자는 사용 불가능합니다.)
• string타입과 다른 타입 사이에 +연산자를 사용하면 string 타입으로 변환됩니다.

let str1 = '1';
let str2 = true;
console.log(str1 + str2); // '1true'

3. 문자열의 속성(property)

• length : 문자열의 전체 길이를 반환합니다.

let str = 'Student';
console.log(str.length); // 7

4. 문자열의 메소드(method)

자바스크립트에서 모든 문자열(string)의 메소드는 결과값으로 새로운 문자열을 생성하여 반환합니다. 기존 문자열 값은 변경될 수 없습니다.(immutable)

4-1. 문자열에서의 위치 반환

• str.indexOf(searchValue)
  • arguments: 찾고자 하는 문자열(searchValue)
  • return value: 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1
  • lastIndexOf는 문자열 뒤에서 부터 찾습니다.

    'Pink Whale'.indexOf('Pink') // 0
	'Pink Whale'.indexOf('pink') // -1
    'Pink Whale'.indexOf('Whale') // 5
    'Pink Whale Whale'.indexOf('Whale') // 5

	'javascript'.lastIndexOf('a') // 6

• str.includes(searchValue)
  찾고자 하는 문자열이 str에 포함되는지 판별하고, 결과를 boolean 타입으로 반환합니다.

    'Pink Whale'.includes('Pink') // true
	'Pink Whale'.includes('pink') // false

---

4-2. 문자열에서 지정된 위치에 있는 문자 반환

• str.charAt(index)
  • 지정된 인덱스에 해당하는 유니코드 단일문자를 반환합니다.

const sentence = 'The quick brown fox jumps over the lazy dog.';
const index = 4;
console.log(sentence.charAt(index)); // "q"

---

4-3. 문자열 분리

• str.split(seperator)
  • arguments: 분리 기준이 될 문자열
  • return value: 분리된 문자열이 포함된 배열
  • csv 형식을 처리할 때 유용합니다.
    csv란 몇 가지 필드를 쉼표(, )로 구분한 텍스트 데이터 및 텍스트 파일입니다.

let str = 'Hello from javascript';
console.log(str.split(''));
// ['Hello', 'from', 'javascript']

---

4-4. 문자열 분리

• str.substring(start[,end])
  • arguments: 시작index[,끝index]
  • return value: 시작index부터 [끝index]전까지 추출하여 새 문자열 생성
  • 특징 :
    • 끝index가 생략된 경우 문자열의 끝까지 모든 문자 추출
    • 시작index가 끝index보가 클 경우 두 개의 index값을 변경해서 문자 추출
    • 시작index와 끝index가 같은 경우 빈 문자열 반환
    • 인자값이 음수일 경우에는 0처리됩니다.

let str = "abcdefghij";
console.log(str.substring(0,3)); // 'abc'
console.log(str.substring(3,0)); // 'abc'
console.log(str.substring(-1, 4)); //'abcd', 음수는 0으로 취급

• str.slice(start[, end])
  • arguments: 시작index[,끝index]
  • return value: 시작 index부터 [끝index]전까지 추출하여 새 문자열 생성
  • 특징 :
    • 시작index가 끝index보가 클 경우 ""을 리턴
    • 인자값이 음수일 경우에는 가장 뒤에서 음수의 절대값만큼 내려온 index로 취급

let str1 = 'The morning is upon us.', // the length of str1 is 23.
    str2 = str1.slice(1, 8), 
    str3 = str1.slice(4, -2),
    str4 = str1.slice(12),
    str5 = str1.slice(30);
console.log(str2); // OUTPUT: he morn
console.log(str3); // OUTPUT: morning is upon u
console.log(str4); // OUTPUT: is upon us.
console.log(str5); // OUTPUT: ""

---

4-5. 문자열 결합

• str.concat(string2, string3...)
  • arguments: string2, string3...
  • return value: 주어진 문자열을 모두 붙인 새로운 문자열을 반환합니다.

const str = 'Hello';
const string2 = 'World';

console.log(str1.concat(' ', string2));
// expected output: "Hello World"

---

4-6. 문자열의 대소문자 변환

• str.toLowerCase() / str.toUpperCase()
  • arguments: 없음
  • return value: 대, 소문자로 변환된 문자열

console.log('STR'.toLowerCase()); // 'str'
console.log('str'.toLowerCase()); // 'STR'

---

** 4-7 문자열의 특정 문자 반환

• str.substr()
  • start: 추출하고자 하는 문자들의 시작위치
  • length: 옵션값. 추출할 문자들의 총 숫자

str.substr(start[, length])

const str = "hello"

console.log(str.substr(1, 2)) // 'el'
console.log(str.substr(2)) // 'llo'

---

4-8. 문자열 주위의 공백 제거

• str.trim()
  str 문자열의 양끝의 공백을 제거한 문자열을 반환합니다.
  str 문자열에 공백이 없어도 예외가 발생하지 않고 새 문자열이 반환됩니다.

const greeting = '   Hello world!   ';
console.log(greeting);
// expected output: "   Hello world!   ";
console.log(greeting.trim());
// expected output: "Hello world!";

---

4-9. 정규 표현식을 이용한 문자열 조작
다음의 메소드는 인수로 전달받은 정규 표현식을 이용하여, str 문자열의 검색, 대조, 대체 등의 작업을 수행합니다.

• str.search()
• str.match()
• str.replace()

추후에 정규 표현식 포스트에서 적용해보겠습니다.