웹/JavaScript
[Javascript] string, toUpperCase, toLowerCase, chartAt, at, indexOf, lastIndexOf, includes, startsWith,endsWith, search,substring, slice, split, trim,trimStart,trimEnd,repeat,replace,replaceAll
Judith Hopps
2023. 1. 12. 11:36
반응형
I. 생성자 함수
const strObj1 = new String();
const strObj2 = new String('Hello World!');
console.log(strObj1);
console.log(strObj2);
console.log(strObj1.valueOf(), strObj1.toString());
console.log(strObj2.valueOf(), strObj2.toString());
- 콘솔에서 펼쳐서 프로퍼티들을 확인해 볼 것
- [[PrimitiveValue]] 비교해 볼 것
- valueOf 또는 toString 메서드로 문자열 원시값 반환
const fromNum = new String(123);
const fromBool = new String(true);
const fromArr = new String([1, 'A', false]);
const fromObj = new String({a: 1});
console.log(typeof fromNum, fromNum);
console.log(typeof fromBool, fromBool);
console.log(typeof fromArr, fromArr);
console.log(typeof fromObj, fromObj);
console.log(fromNum.toString());
console.log(fromBool.toString());
console.log(fromArr.toString());
console.log(fromObj.toString());
- 다른 타입들도 감쌀 수 있음 - 문자열로 변환한 값을 가진 String 객체 반환
new 없이 사용하면
const str1 = String('Hello World!');
const str2 = String(123);
const str3 = String(true);
const str4 = String({x: 1, y: 2}); // 💡 [object Object]
const str5 = String([1, 2, 3]); // 💡 1,2,3
console.log(typeof str1, str1);
console.log(typeof str2, str2);
console.log(typeof str3, str3);
console.log(typeof str4, str4);
console.log(typeof str5, str5);
- ⭐ 생성자로서가 아닌 String 함수는 주어진 인자를 문자열로 변환하여 반환
II. 유사 배열 객체
let myStr = '안녕하세요!';
console.log(
myStr.length,
myStr[0],
myStr[myStr.length - 1]
);
myStr[myStr.length - 1] = '?';
console.log(myStr); // 💡 배열과 달리 그대로
for (const letter of myStr) {
console.log(letter);
}
- length 프로퍼티: 글자 수 반환
- [] 안에 인덱스 숫자를 넣어 ~번째 글자 읽기(만) 가능
- for ... of문 사용 가능 이후 배울 이터러블이기 때문
⭐️ String은 원시값
- [] 접근 또는 인스턴스 메서드로 특정 글자만 수정하는 것은 불가능한 이유
- 수정하려면 변수 값 자체를 다른 문자열로 대체해야...
III. 주요 인스턴스 메서드
1. toUpperCase, toLowerCase
- 라틴어 문자를 모두 대문자/소문자로 변경하여 반환
const word = 'Hello, World.';
console.log(
word.toUpperCase(),
word.toLowerCase()
);
console.log(word);
- ⭐️ 기존의 문자열은 바꾸지 않음! 다음의 메서드들 모두 마찬가지
흔한 활용예
function areSameWords (word1, word2) {
return word1.toLowerCase() === word2.toLowerCase();
}
console.log(
areSameWords('Hello', 'hello'),
areSameWords('가나다', '가나다'),
areSameWords('ABC', 'DEF')
);
2. charAt, at
- 인자로 주어진 인덱스의 문자 반환
charAt
console.log(
'Hello World!'.charAt(0),
'안녕하세요~'.charAt(2)
);
✨ at
- 신기능, 배열에서도 사용
- 음수로 뒤에서부터 접근 가능 ( -1 부터 )
console.log(
'안녕하세요~'.at(1),
'안녕하세요~'.at(-1)
);
3. indexOf, lastIndexOf
- 인자로 주어진 문자열이 앞, 또는 뒤에서 처음 나타나는 인덱스 반환
- 포함되지 않을 시 -1 반환
const word = '반갑습니다!';
console.log (
word.indexOf('습'),
word.lastIndexOf('습')
);
const word = '아니, 하나마나한 걸 왜 하나?';
console.log (
word.indexOf('하나'),
word.lastIndexOf('하나')
);
console.log(
'가나다라마'.indexOf('하'),
'가나다라마'.lastIndexOf('하')
);
4. includes, startsWith, endsWith
- 인자로 주어진 문자열 포함( 아무곳에 / 맨 앞에 / 맨 끝에 ) 여부 불리언으로 반환
const sentence = '옛날에 호랑이 한 마리가 살았어요.';
for (const word of ['옛날에', '호랑이', '살았어요.', '나무꾼']) {
console.log(
'includes', word, sentence.includes(word)
);
console.log(
'startsWith', word, sentence.startsWith(word)
);
console.log(
'endsWith', word, sentence.endsWith(word)
);
console.log('- - - - -');
}
5. search
- 인자로 받은 🔗 정규표현식과 일치하는 첫 부분의 인덱스 반환
- 없을 시 -1 반환
console.log(
'하루가 7번 지나면 1주일이 되는 거야.'.search(/[0-9]/),
'하루가 일곱 번 지나면 일주일이 되는 거야.'.search(/[0-9]/)
);
6. substring
- 인자로 전달받은 인덱스(들)을 기준으로 자른 문자열 반환
const word = 'ABCDEFGHIJKL';
const part = word.substring(4, 8)
console.log(word, part);
const word = 'ABCDEFGHIJKL';
console.log(
word.substring(4)
);
console.log(
word.substring(-1),
word.substring(4, 100),
word.substring(100)
);
- 인자를 하나만 넣으면 해당 인덱스부터 끝까지
- 음수나 범위 외 숫자는 범위 내 최소/최대 숫자로
const sentence = '옛날에 호랑이 한 마리가 살았어요.';
const firstWord = sentence.substring(
0, sentence.indexOf(' ')
);
const lastWord = sentence.substring(
sentence.lastIndexOf(' ') + 1, sentence.length
);
console.log(firstWord, lastWord);
7. slice
- substring과 같으나 음수로 뒤에서부터 자를 수 있음
const word = 'ABCDEFGHIJKL';
console.log(
word.substring(4, 8),
word.slice(4, 8),
);
console.log(
word.substring(-4),
word.slice(-4)
);
const sentence = '옛날에 호랑이 한 마리가 살았어요.';
const firstWord = sentence.slice(
0, sentence.indexOf(' ')
);
const lastWord = sentence.slice(
sentence.lastIndexOf(' ') + 1 - sentence.length
);
console.log(firstWord, lastWord);
8. split
- 인수로 주어진 문자열이나 정규표현식으로 분리하여 배열을 반환
console.log(
'010-1234-5678'.split('-'),
'ABC1DEF2GHI3JKL'.split(/[0-9]/)
)
// 인자로 빈 문자열을 넣거나 인자 생략시
const word = '안녕하세요';
console.log(
word.split(''),
word.split()
)
const word = '하나 하면 할머니가 지팡이 짚고서 잘잘잘';
console.log(
word.split(' ', 2),
word.split(' ', 4)
)
- 두 번째 인자로 배열의 최대 길이 지정 가능
const sentence = '옛날에 호랑이 한 마리가 살았어요.';
const splitted = sentence.split(' ');
const firstWord = splitted[0];
const lastWord = splitted[splitted.length - 1];
console.log(firstWord, lastWord);
9. trim, trimStart, trimEnd
앞뒤의 공백 제거하여 반환
const word = ' Hello World! ';
console.log(`--${word}--`);
console.log(`--${word.trim()}--`);
console.log(`--${word.trimStart()}--`);
console.log(`--${word.trimEnd()}--`);
- 중간의 공백은 제거하지 않음
10. repeat
인자로 주어진 정수만큼 문자열을 반복하여 반환
const word = '호이';
console.log(word.repeat(3));
console.log(word.repeat(0));
console.log(word.repeat());
console.log(word.repeat(-1));
- 인수가 없거나 0이면 빈 문자열 반환, 음수면 오류 발생
11. replace, replaceAll
첫 번째 인자로 받은 문자열 또는 정규식을 두 번째 인자로 치환한 결과를 반환
console.log(
'이스탄불은 터키의 수도이다.'.replace('터키', '튀르키예')
);
const word = '밥 좀 먹자, 밥. 응? 야, 밥 좀 먹자고 밥, 밥!';
console.log(word.replace('밥', '라면'));
console.log(word.replace(/밥/g, '라면'));
- replace의 첫 인자가 문자열이면 일치하는 첫 부분만 치환
- 모두 치환하려면 정규식 /.../g 사용
console.log(word.replaceAll('밥', '라면'));
console.log(word.replaceAll(/밥/g, '라면'));
- replaceAll은 문자열도 자동으로 /.../g처럼 인식
⭐️ 메서드 체이닝 method chaining
값을 반환하는 인스턴스 메서드를 연속으로 사용
const word = ' 모두 HELLO! ';
const rpFrom = 'hello';
const rpTo = 'bye';
console.log(
word
.trimStart() // '모두 HELLO! '
.toLowerCase() // '모두 hello! '
.replaceAll(rpFrom, rpTo) // '모두 bye! '
.toUpperCase() // '모두 BYE! '
.repeat(3) // '모두 BYE! 모두 BYE! 모두 BYE! '
.trimEnd() // '모두 BYE! 모두 BYE! 모두 BYE!'
);
console.log(word); // 원본은 그대로
반응형