javascript

문자열의 property & method 알아보기

grovy 2023. 3. 29. 19:00
728x90

String 사용 방법에 대해 알아볼게요

문자열 property  length

문자열의 길이를 반환 합니다.  아래에서 선언한 str의 길이 42를 반환해요 ! 

const str = 'Life, the universe and everything. Answer:';

console.log(`${str} ${str.length}`);

// Life, the universe and everything. Answer: 42

문자열 method 와 쓰이는 방식

1)charAt() 메서드 & for 문 & for in 문 

charAt() 특정 문자의 위치를 반환 합니다.

 

또한 필요할땐 Object 형태 임시로 변경이 되어 사용이 가능해요 

사용이 끝나면 String형태로 돌아오지만요 

아래 for문과 for in 문을 보시면 이해할수있어요 ! 

const sentence = 'The quick brown fox jumps over the lazy dog.';
const index = 4;
console.log(`The character at index ${index} is ${sentence.charAt(index)}`);
// "The character at index 4 is q"
// index 4의 위치한 값은 q이므로 q를 반환해요 !

for (let index = 0; index < sentence.length; index++) {
    document.write(sentence[index] + " ");
}
document.write("<br>");
for(i of sentence){
    document.write(i + " ");
}

//for in문과 for문을 이용해 출력해보았어요 ! 

//T h e q u i c k b r o w n f o x j u m p s o v e r t h e l a z y d o g .
//T h e q u i c k b r o w n f o x j u m p s o v e r t h e l a z y d o g .

2) indexOf() 

문자열이 2개이상 구성되어있다면 해당 문자열에서 부분 문자열이 어디있는지 찾을수 있어요 

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

const searchTerm = 'dog';
const indexOfFirst = paragraph.indexOf(searchTerm);

console.log(`The index of the first "${searchTerm}" from the beginning is ${indexOfFirst}`);
// "The index of the first "dog" from the beginning is 40"
//첫번째 dog 는 40번째에 있어요 

console.log(`The index of the 2nd "${searchTerm}" is 
${paragraph.indexOf(searchTerm, (indexOfFirst + 1))}`);
//"The index of the 2nd "dog" is 52"
//두번째 dog 는 40번째에 있어요

3) startsWith() , endWith()

두 메서드는 해당 문자열이 있는지 없는지 반환 해요

대소문자도 구별하구요 ! 아래 예를 보고 알아볼게요 

 

문자열.startWidth(문자열 or 문자)

문자열.startWidth(문자열, 위치)

const str1 = 'Saturday night plans';

console.log(str1.startsWith('Sat'));
// true

console.log(str1.startsWith('Sat', 3));
//3번째 위치부터 Sat를 찾는데 없어서 false

문자열.endWidth(문자열 or 문자)

문자열.endWidth(문자열, 위치)

const str1 = 'Cats are the best!';

console.log(str1.endsWith('best!'));
//  true

console.log(str1.endsWith('best', 17));
//  true

const str2 = 'Is this a question?';

console.log(str2.endsWith('question'));
console.log(str2.endsWith('question?'));
// false
// true 문자열 이기 때문에 위엔 ? 가 빠져서 false가 나와요

4) includes()

includes()메서드는 문자열이 포함되어있는지 확인해요 ! 

const sentence = 'The quick brown fox jumps over the lazy dog.';

const word = 'fox';

console.log(`The word "${word}" ${sentence.includes(word) ? 'is' : 'is not'} in the sentence`);
// "The word "fox" is in the sentence"
// true와 false를 반환하기 때문에 is가 나왔어요 !

5) trim(), trimStart(), trimEnd()

위 메소드는 은 공백을 제거해요 !  어떻게 쓰이는지 알아볼게요 ! 

trim() 양쪽 끝에 공백을 제거 합니다. 

const greeting = '   Hello world!   ';

console.log(greeting);
//"   Hello world!   ";

console.log(greeting.trim());
//"Hello world!";

trimStart() 문자열 앞의 공백을 제거해 줍니다. 

const greeting = '   Hello world!   ';

console.log(greeting);
//"   Hello world!   ";

console.log(greeting.trimStart());
//"Hello world!   ";

trimEnd() 문자열 뒤의 공백을 제거해 줍니다. 

const greeting = '   Hello world!   ';

console.log(greeting);
//"   Hello world!   ";

console.log(greeting.trimEnd());
//"   Hello world!";

공백을 완전히 제거 하는 방법도 있어요 ! 

const greeting = '   Hello world!   ';
document.write(greeting.replace(/(\s*)/g, ""));
    
//"Helloworld!";

이렇게 정규 표현식과 replace를 사용해서 공백을 완전히 제거할수 있어요 

6)toUpperCase(), toLowerCase() 

대소문자를 변경해주는 메소드에요 

toUpperCase()는 대문자로 toLowerCase는 소문자로 변경해줘요 

const sentence = 'The quick brown fox jumps over the lazy dog.';

console.log(sentence.toUpperCase());
//"THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."

const sentence1 = 'The quick brown fox jumps over the lazy dog.';

console.log(sentence1.toLowerCase());
//"the quick brown fox jumps over the lazy dog."

7)substring()

문자열.substring(시작위치)

문자열.substring(시작위치, 끝위치)

 

문자열을 잘라서 반환 해줘요 ! 

const str = 'Mozilla';

console.log(str.substring(1, 3));
// "oz"

console.log(str.substring(2));
// "zilla"

8) slice()

문자열 을 substring()과 비슷하게 자르지만 

숫자를 음수를 사용할수있어요 음수를  넣을경우 맨끝부터 -1 이됩니다 

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31));
//"the lazy dog."

console.log(str.slice(4, 19));
//"quick brown fox"

console.log(str.slice(-4));
//"dog."
//음수이므로 뒤에서 부터 자릅니다. 

console.log(str.slice(-9, -5));
//"lazy"
//뒤에서부터 5번째
//lazy dog.'
//9876543210
//이므로 lazy가 나와요

9) split()

문자열.split(구분자)는 문자열을 구분자로 구분하여 배열로 만들어줘요

아래 예문을 볼게요 ! 

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// "fox"
//' ' 을 구분자로 해서 3번째 배열에 있는 fox 가 출력됩니다.

const chars = str.split('');
console.log(chars);
// Array ["T", "h", "e", " ", "q", ..... "d", "o", "g", "."]
//구분자를 넣지 않을 경우 각 문자열을 배열로 만들어요 

const strCopy = str.split();
console.log(strCopy);
//Array ["The quick brown fox jumps over the lazy dog."] 
//구분자를 넣지않으면 통으로 배열을 만들어요

보안을 위해 이메일 주소의 일부를 감추기! 

 

회원제 사이트중 개인정보를 표시할때 보안을 위해 또는 메일 소유자 인지 확인을 위해

이메일 주소를 전부 보여주지 않고 일부만 보여줄때가 있습니다.

이번에는 사용자의 이메일 주소중 @ 앞의 내용을 세자리 까지만 보여주는 프로그램을 작성해 보겠습니다.

 

See the Pen Untitled by getgrovy (@getgrovy) on CodePen.