[Javascript] 기초 공부 - String

String 파헤치기

쌍따옴표("") 나 홑따옴표('') 모두 String형 값에 사용한다.
둘 중에 어떤 것을 사용하는지는 회사 규정에 따라 다르다.

let a = '오케이';
let b = "이것도 오케이";

대소문자 바꾸기 : toUpperCase(), toLowerCase()

String형에서 제공하는 기본 함수중에 대소문자를 바꿔주는 함수가 있다.
그렇다면 이 함수는 언제 사용하게 될까?

console.log('python' === 'python');
console.log('Python' === 'python');
>>> true
>>> false

위에 코드를 보면 알듯이 String은 대소문자가 구분된다.
만약 웹사이트 검색 기능에서 Javascript를 검색할 때, 대문자 J와 소문자 j를 구분없이 검색하고 싶을 때 사용될 수 있다.

아래 코드에서 toUpperCase, toLowerCase 함수를 호출하고 반환되는 값을 확인해보자.

let lastName = 'Mag Rfs';
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();
console.log(lastName);
console.log(upperLastName);
console.log(lowerLastName);
>>> Mag Rfs
>>> MAG RFS
>>> mag rfs

lastName의 변수에 String형 값을 할당하면 lastName 변수는 String형 변수가 되는 것이다.
그러면 lastName은 String형에 제공되는 모든 함수를 사용할 수 있게된다. 그 중에 toUpperCase, toLowerCase 는 String에서 제공하는 함수이다.

또한, 결과를 보면 toUpperCase, toLowerCase를 쓴다고 해도 변수의 값이 전부 대문자가 되지않고 lastName은 이전 값을 그대로 갖고있다.

문자 길이 : length

배열에서와 마찬가지로 문자인 String형도 length 라는 속성으로 길이를 알 수 있다.

이 또한 자주 사용되는 함수인데, 회원가입 시 이름에 10자가 넘어가는지 체크하거나, 핸드폰 번호가 10자 혹은 11자인걸 체크할 때 사용되곤 한다.

if (phoneNumber.length !== 10 && phoneNumber.length !== 11) {
  alert("폰번호를 잘못 입력하셨습니다.");
}

참조하기

핸드폰 번호는 01012345678 으로 항상 0 으로 시작한다.
하지만 0으로 시작하는 숫자 표현식은 존재하지 않는다.

그래서 핸드폰 번호는 숫자로 이뤄져있지만, 문자열로 관리해야만 컴퓨터가 0 도 갖고있게 된다.

var phoneNumber = 01012349876;
console.log(phoneNumber);
console.log(phoneNumber.length);
>>> 1012349876
>>> undefined

let phoneNumber = "01012349876";
console.log(phoneNumber);
console.log(phoneNumber.length);
>>> 01012349876
>>> 11

위 코드를 확인하면 phoneNumber는 Number형이라서 앞의 0 없이 뒷숫자부터 할당되었고, Number형에 length 속성도 존재치 않는다.
그래서 밑에 있는것과 같이 String형으로 저장해야한다.

문자열 찾기 : indexOf()

let info = "Javascript는 프로그래밍 언어입니다.";

위의 내용중에 "프로그래밍" 이라는 단어가 포함됐는지 알고 싶다면 어떻게할까?

indexOf() 라는 함수는 특정 문자열이 들어있는지 확인하고, 있다면 몇 번 째 순서에 해당 문자열이 있는지 알려준다. 만약 해당 문자열이 없다면 -1을 반환하게 된다.

이 함수는 어떨 때 사용하게 될까?
대표적으로 댓글에 욕설이 포함되있다면 차단하는 기능에 쓸 수 있다.

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍"); 
console.log(info, firstChar);
>>> JavaScript는 프로래밍 언어이다. 12

if (firstChar !== -1) { 
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length); 
}
console.log(info);
>>> JavaScript는 프로그래밍 언어이다.

위 코드는 프로래밍이라는 오타 문구를 "프로그래밍"으로 바꿔주는 코드이다.

• info 문구에서 "프로래밍"이 시작되는 index는 12이다.
• if (firstChar !== -1) 의 의미는
  • = firstChar이 -1이 아니면
  • = "프로래밍" 이라는 문구가 없지 않다면
  • = "프로래밍" 이라는 문구가 있다면
  • = "프로래밍" 문구는 12번째에서 시작하므로 firstChar는 12이라는 의미이다.
• "프로래밍" 이라는 오타가 포함되어 있으므로 if문이 실행된다.
• info.slice(0, firstChar)
  • 여기서 slice() 함수가 쓰였는데, 이름 그대로 텍스트를 잘라주는 함수이다.

  slice(잘릴 시작위치, 잘릴 끝위치)

• info.slice(firstChar+4, info.length);
  • info의 16번째인 "언" 이전의 스페이스부터 info의 길이인 22번째까지 자르게 된다. 22번째는 문자가 존재하지 않지만, 그 직전에 끊어지므로 "." 가지 포함하는 문자열로 잘리게 된다.