Unit2-[JavaScript] 기초 [String Type]

2022. 12. 15. 16:28코드스테이츠/코드스테이츠S1: Chapter & Unit

String 타입

JavaScript 데이터 타입 String(문자열)은 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입입니다.

따옴표(’), 쌍따옴표(”), 백틱(`)으로 감싸면 됩니다. 맥북의 경우 백틱은 영어로 전환하고 물결(~)을 누르면 입력할 수 있습니다.

한자나 이모지와 같은 특수문자도 문자열로 만들 수 있고, 숫자와 문자를 조합해서 문자열로 만들 수도 있습니다.

특히 백틱으로 만든 문자열은 줄바꿈도 가능합니다.

로 문자열을 이어붙일 수 있습니다. 문자열과 문자열을 이어붙일 때의 +문자열 연결 연산자로써 쓰입니다. 다른 타입과 이어붙이려고 하면 모두 문자열로 변합니다. 특히, 숫자와 이어붙이기를 시도하다가 예상 못한 결과를 얻지 않도록 조심합니다. 위 이유로 가능하면 다른 타입 간의 연산을 하지 않도록 조심해야 합니다.

"박수범"
'순양'
'잡아라스크립트'
`가나다라마
바사 아자차카
타파하`

+ 로 문자열을 이어붙일 수 있습니다. 문자열과 문자열을 이어붙일 때의 +문자열 연결 연산자로써 쓰입니다.

다른 타입과 이어붙이려고 하면 모두 문자열로 변합니다.

특히, 숫자와 이어붙이기를 시도하다가 예상 못한 결과를 얻지 않도록 조심합니다.

위 이유로 가능하면 다른 타입 간의 연산을 하지 않도록 조심해야 합니다.

"안녕하세요"+"!!" // 안녕하세요!!
"네"+" "+"안녕하세요?" //네 안녕하세요?
23 + "5" // 235
23 + 5 // 28
"23"+"5" // 235

 

'HELLO WORLD'.toLowerCase(); // .toLowerCase는 문자열을 소문자로 변경,  'hello world'
'hello world'.toUpperCase(); // .toUpperCase는 문자열을 대문자로 변경, 'HELLO WORLD'
'hello '.concat('world'); // .concat 문자열 연결 연산자 + 처럼 문자열 이어붙일수 있음. 'hello world'
'hello world'.slice(0, 7); // .slice 문자열의 인덱스를 기준으로 자름. 'hello wo'

문자열의 length 속성

문자열의 length 속성을 이용하여 문자열의 길이를 확인할 수 있습니다. 문자열 값에 .length 를 붙이면 됩니다.

console.log("코끼리아저씨는코가손이래".length); // 12
console.log("나는문어 꿈을 꾸는 문어."); // 띄워쓰기도 문자열로 치기 때문에 14

 

인덱스(Index)

문자열의 각 문자는 순서를 가지고 있습니다. 각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있습니다. 첫 번째 문자의 인덱스는 0입니다. JavaScript는 우리 일상생활에서 순서를 셀 때 1부터 1, 2, 3 … 세는 것이 아니고, 0부터 세는 점을 주의해주세요. 이를 Zero-based numbering이라고 합니다.

let str = "elements";
console.log(str[1]); // 'l'
console.log(str[5]); // 'n'

 

문자열 주요 메서드

문자열의 유용한 메서드 일부를 소개합니다.

  • toLowerCase() : 문자열을 소문자로 변경합니다.
  • toUpperCase() : 문자열을 대문자로 변경하니다.
  • concat() : 문자열 연결 연산자 + 처럼 문자열을 이어붙일 수 있습니다.
  • slice() : 문자열의 일부를 자를 수 있습니다.
'HELLO WORLD'.toLowerCase(); // 소문자변환 'hello world' 
'hello world'.toUpperCase(); // 대문자변환 'HELLO WORLD'
'hello '.concat('world'); // 문자열 이어줌 'hello world'
'hello world'.slice(0, 5); // 인덱스 기준으로 잘라줌 'hello'
  • indexOf() : 문자열 내에 특정 문자나 문자가 인덱스에서 몇 번째에 위치하는지 확인합니다.
    • 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
    • 포함되어 있지 않으면 -1 을 반환합니다.
'🍎🍓🍉🍇'.indexOf('🍎'); // 딸기는 문자열 인덱스의 가장 첫번째에 포함 되므로 0
'🍎🍓🍉🍇'.indexOf('★'); // 별은 문자열에 포함되지 않으므로 -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1

 

궁금증.

1.slice() 메서드와 split() 메서드는 각각 쓰임새가 다른가? 다름다면 어떤 기준에 맞춰 쓰는가?

2.indexOf() 메서드는 패스워드의 보안을 위해 특수문자를 반드시 기입하라는 경우가 있는데, 이러한 경우에  .indexOf()를 사용하는 경우가 있는가?