2022. 6. 30. 00:00ㆍWEB.DEV
안녕하세요.
이번 포스팅에서는 자바스크립트 문자 메소들에 대해서 알아보겠습니다. 아래에 있는 메소드 외에 알고 계신 메소드가 있다면 댓글 달아주시면 감사하겠습니다.
charAt 메소드
- 해당 위치의 문자를 가져오는 메소드
const txt = 'Hello World';
console.log(txt.charAt(0)); // H
console.log(txt.charAt(3)); // l
indexOf 메소드
- 앞에서 부터 해당 문자가 있는 첫번째 인덱스를 가져오는 메소드, 만약에 해당 문자가 존재하지 않을 경우 -1이 반환
const txt = 'Hello World';
console.log(txt.indexOf('o')); // 4
console.log(txt.indexOf('World')); // 6
console.log(txt.indexOf('test')); // -1
lastIndexOf 메소드
- indexOf 메소드와 반대로 끝에서 부터 해당 문자가 있는 첫번째 인덱스를 가져오는 메소드, 만약에 해당 문자가 존재하지 않을 경우 -1이 반환
const txt = 'Hello World';
console.log(txt.lastIndexOf('o')); // 7
console.log(txt.lastIndexOf('World')); // 6
console.log(txt.lastIndexOf('test')); // -1
search 메소드
- indexOf 메소드와 동일
const txt = 'Hello World';
console.log(txt.search('o')); // 4
console.log(txt.search('World')); // 6
console.log(txt.search('test')); // -1
includes 메소드
- 문자열 안에 해당 문자가 존재 여부를 가져오는 메소드
const txt = 'Hello World';
console.log(txt.include('World')); // true
console.log(txt.include('test')); // false
charCodeAt 메소드
- 해당 위치의 문자의 코드를 가져오는 메소드
const txt = 'Hello World';
console.log(txt.charCodeAt(0)); // 72
match 메소드
- 해당 문자열이 포함된 혹은 정규식에 해당하는 글자를 배열로 반환하는 메소드
const txt = 'Hello World';
console.log(txt.match('o'); // ['o']
console.log(txt.match(/o/g)); // ['o', 'o']
console.log(txt.match(/l/g)); // ['l', 'l', 'l'];
console.log(txt.match(/ll/g)); // ['ll'];
console.log(txt.match(/text/g); // null
startsWith 메소드
- 해당 문자로 문자열이 시작하는지 판별하는 메소드
const img = 'http://img.testimage.com/hello-world.jpeg';
console.log(img.startsWith('http')); // true
const img2 = 'hello-world.jpeg';
console.log(img.startsWith('http')); // false
endsWith 메소드
- 해당 문자로 문자열이 끝나는지 판별하는 메소드
const txt = 'Hello World';
console.log('World'); // true
console.log('Hello'); // false
concat 메소드
- 문자열을 연결해주는 메소드
const greeting = 'Hello, ';
const name = 'DEV BAK';
const say = greeting.concat(name);
console.log(greeting); // Hello
console.log(name); // DEV BAK
console.log(say); // Hello, DEV BAK
replace 메소드
- 해당 문자를 찾아서 변경을 해주는 메소드
const img = 'https://img.testimage.com/hello-world.jpeg';
const temp = img.replace('https://img.testimage.com', '');
console.log(img); // https://img.testimage.com/hello-world.jpeg
conosle.log(temp); // hello-world.jpeg
const txt = 'Hello World';
console.log(txt.replace(/i/g, ''); // Helli Wirld
replaceAll 메소드
- 문자열에 포함된 해당 문자를 모두 변경 해주는 메소드
const txt = 'Hello World';
console.log(txt.replaceAll('o', '')); // Hell Wrld
slice(start, end) 메소드
- start부터 end까지의 문자열을 잘라내는 메소드
const txt = 'Hello World';
console.log(txt.slice(0, 3)); // Hel
console.log(txt.slice(2, 3)); // l
console.log(txt); // Hello World
substr(start, length) 메소드
- start 부터 length 만큼 문자열을 잘라내는 메소드
const txt = 'Hello World';
console.log(txt.substr(0, 3)); // Hel
console.log(txt.substr(2, 3)); // llo
console.log(txt); // Hello World
substring(start, end) 메소드
- slice와 동일
const txt = 'Hello World';
console.log(txt.substring(0, 3)); // Hel
console.log(txt.substring(2, 3)); // l
console.log(txt); // Hello World
repeat 메소드
- 해당 문자열을 해당 횟수만큼 반복
const txt = 'Hello World';
console.log(txt.repeat(3)); // Hello WorldHello WorldHello World
console.log(txt); // Hello World
toUpperCase 메소드
- 해당 문자열의 모든 문자를 대문자로 변환하는 메소드
const txt = 'Hello World';
console.log(txt.toUpperCase()); // HELLO WORLD
console.log(txt); // Hello World
toLowerCase 메소드
- 해당 문자열의 모든 문자를 소문자로 변환하는 메소드
const txt = 'Hello World';
console.log(txt.toLowerCase()); // hello world
console.log(txt); // Hello World
trim 메소드
- 해당 문자열의 앞과 뒤에 존재하는 공백을 제거하는 메소드
const txt = ' Hello World ';
console.log(txt.trim()); // Hello World
console.log(txt); // ' Hello World '
trimStart 메소드
- 해당 문자열의 앞의 공백을 제거하는 메소드
const txt = ' Hello World ';
console.log(txt.trimStart()); // 'Hello World '
console.log(txt); //' Hello World '
trimEnd 메소드
- 해당 문자열의 뒤의 공백을 제거하는 메소드
const txt = ' Hello World ';
console.log(txt.trimEnd()); // ' Hello World'
console.log(txt); // ' Hello World '
padStart(maxLength, fillString) 메소드
- 해당 문자열이 maxLength 보다 짧을 경우 앞에 fillString을 붙여서 maxLength 길이로 만드는 메소드
const txt = 'Hello World';
console.log(txt.padStart(15, '*')); // ****Hello World
console.log(txt.padStart(15, 'a1')); // a1a1Hello World
console.log(txt.padStart(14, 'a1')); // a1aHello World
console.log(txt); // Hello World
padEnd(maxLength, fillString) 메소드
- 해당 문자열이 maxLength 보다 짧을 경우 끝에 fillString을 붙여서 maxLength 길이로 만드는 메소드
const txt = 'Hello World';
console.log(txt.padStart(15, '*')); // Hello World****
console.log(txt.padStart(15, 'a1')); // Hello Worlda1a1
console.log(txt.padStart(14, 'a1')); // Hello Worlda1a
console.log(txt); // Hello World
여기까지 부족한 글 읽어주셔서 감사합니다💛
'WEB.DEV' 카테고리의 다른 글
자바스크립트 함수 선언 방법 (0) | 2022.06.30 |
---|---|
자바스크립트 배열 구조분해 (0) | 2022.06.30 |
자바스크립트 화살표 함수(Arrow function) (0) | 2022.06.27 |
자바스크립트 배열 사용 (0) | 2022.06.26 |
[HTML/JS/CSS] contenteditable을 이용한 에디터 폰트 변경하기 (3) | 2021.11.12 |