[JavaScript] 문자열에 대해서 알아보자

 

JavaScript언어에서는 값을 찾거나 위치값을 알아내는 등 여러가자 문자열을 수정하는 방법들이 있습니다.

아래 문자열을 활용한 코드가 있습니다.

// 문자열을 저장할 변수
var str = "Ahi~ javascript!";
// var str = new String("Ahi~ javascript!! ");
var str2 = "jQuery!!! ";
document.write(`원본 : ${str} <br>`);

// 문자열의 5번째 문자 찾기 0~
document.write("5번째 문자 :" + str.charAt(5) + "<br>");

// 4번째부터 4글자를 추출
document.write("4번째부터 4글자:" + str.substr(4, 4) + "<br>");

// 4번째부터 7번째까지 추출
document.write("4번째부터 7번째:" + str.substring(4, 8) + "<br>");

// j가 들어있는 위치값
document.write("j가 있는 위치값을 앞에서 :" + str.indexOf("j") + "<br>");

// z가 있는 위치값
document.write("없는 z의 위치값 :" + str.indexOf("z") + "<br>");

// i의 위치값 뒤에서
document.write("i가 있는 위치 뒤에서 찾기 : " + str.lastIndexOf("i") + "<br>");

// match 찾는 문자열이 있으면 문자를 반환하고, 없으면 null을 반환
document.write("s가 있는지 찾기" + str.match("s") + "<br>");
document.write("z가 있는지 찾기" + str.match("z") + "<br>");

// search indexOf
document.write("s" + str.search("s") + "<br>");
document.write("z" + str.search("z") + "<br>");

// 문자열 변경하기 - 원본은 변경되지 않는다. (새로운변수안에 넣어야 저장가능)
document.write("javascript를 jQuery로 변경 : " + str.replace("javascript", "jQuery") + "<br>");
document.write(str + "<br>");

// 문자열 대문자로
document.write("대문자로 : " + str.toUpperCase() + "<br>");

// 문자열 소문자로
document.write("소문자로 : " + str.toLocaleLowerCase() + "<br>");

// 문자열 합치기
document.write("두문자열 합치기 : " + str.concat(str2) + "<br>");

// 문자열 코드값 65~ A
document.write("65 코드값 :" + str.charCodeAt(0) + "<br>");
// 코드 값을 이용한 문자 찾기
document.write("65 : " + String.fromCharCode(65) + "<br>");

// 공백을 기준으로 문자들 분리하기
var sp = str.split(" ");
document.write(sp[0] + "<br>");
document.write(sp[1] + "<br>");

// 반복하기
var star = "★";
document.write(star.repeat(5) + "<br>");

// 공백제거하기
document.write(str.trim() + "<br>");

// 문자열의 길이 알아내기
document.write(str.length + "<br>");

// 끝나는지 endsWith() true
document.write(str.endsWith("t!"));

결과값은 다음과 같습니다.

원본 : Ahi~ javascript!
5번째 문자 :j
4번째부터 4글자: jav
4번째부터 7번째: jav
j가 있는 위치값을 앞에서 :5
없는 z의 위치값 :-1
i가 있는 위치 뒤에서 찾기 : 19
s가 있는지 찾기s
z가 있는지 찾기null
s16
z-1
javascript를 jQuery로 변경 : Ahi~ javascript!
Ahi~ java script!
대문자로 : AHI~ JAVA SCRIPT!
소문자로 : ahi~ javascript!
두문자열 합치기 : Ahi~ javascript!jQuery!!!
65 코드값 :65
65 : A
Ahi~
java
★★★★★
Ahi~ java script!
23
true

 

하나씩 살펴보면

• chartAt(n) : 문자열의 n번째 문자 출력
• subStr(n, m) : 문자열의 n번째부터 m번째까지 문자 출력
• substring(n, m) : n번째부터 m번째까지 문자 출력
• indexOf( "n" )  : 문자 "n" 이 들어있는 위치 값 출력 (앞에서부터 검색)
• lastIndexOf( "n" ) : 문자 "n" 이 들어있는 위치 값 출력 (뒤에서부터 검색)
• match( "n" ) : 문자열에서 문자  "n" 이 있으면 n 값 추출 없다면 null 값 출력
• replace( "n" , "m" ) : 문자열 n을 문자열 m 으로 변경하여 출력
• toUpperCase() : 문자열을 대문자로 변경하여 출력
• toLocaleLowerCase() : 문자열을 소문자로 변경하여 출력
• n.concat(m) : 변수 n과 m 합쳐서 출력
• charCodeAt(n) : n번째 위치에 있는 문자 아스키코드 값으로 변경하여 출력
• split(" ") : 공백을 기준으로 문자 분리하여 출력
• m.repeat(n) : m변수 n번 반복하여 출력
• trim( " " ) : 공백제거하기
• length : 문자열의 길이 출력
• endsWith( "n" ) : 문자열 "n" 으로 끝나면 true 아니라면 false 출력

문자열은 이와 같이 여러가지 방법으로 출력할 수 있다.

 

---

 

위 문법들을 사용하여 아래와 같이 전화번호의 뒷자리 4자리를 *으로 변경할 수도 있습니다.

// 이름 입력받기
var userName = prompt("당신의 이름을 영문자로 입력하세요", ""); // Lee 입력

// 전화번호 입력받기
var userTel = prompt("전화번호를 - 없이 입력하세요", ""); // 01012345678 입력

// 이름을 대문자로 출력하기
document.write(userName.toUpperCase() + "<br>"); // LEE 출력

// 전화번호
var result = userTel.substr(0, userTel.length - 4) + "****";
document.write("당신의 전화번호는 :" + result); // 0101234**** 출력

위 코드에서 userTel.length - 4 는 입력한 전화번호의 문자 길이인 11에 4를 빼 전화번호의 0위치부터 7까지의 문자를 ****으로 변경하여 출력하게 된다.