[2023 신입부원 기초 스터디] 조상혁 #7주차 - Js

JS 유용한 문자열 매소드들

 

모두 대소문자로 바꾸기

const str = 'Hello world';

console.log(str.toUpperCase());
console.log(str.toLowerCase());

//출력 HELLO WORLD / hello world

공백 지우기 

const str = '         haha        ';

//앞뒤 공백지우기
console.log(str.trim());
//앞 공백지우기
console.log(str.trimStart());
//뒤 공백지우기
console.log(str.trimEnd());

글자에 줄 추가하기 

const str = 'Hello';

console.log(str.padStart());
console.log(str.padEnd());

// 출력 _____Hello / Hello_____

문자열에서 원하는 글자 인덱싱하기

const str = '안녕하세요. 말하는감자입니다!';

console.log(str.indexOf('감자'));

//출력 10

문자열에 글자 있는지 알기

const str = '안녕하세요. 말하는감자입니다!';

console.log(str.includes('안녕'));
console.log(str.includes('아니'));

//출력 true / false

문자열이 어떤것으로 시작하는지 알기

const str = '안녕하세요. 말하는감자입니다!';

console.log(str.startsWith('안녕'));
console.log(str.endsWith('안녕'));

//출력 true / false

문자열에서 원하는 글자 바꾸기

const str = '안녕하세요. 말하는감자입니다! 감자!감자!감자!';

console.log(str.replace('감자', '오이'));
console.log(str.replaceAll('안녕', '당근'));

//출력 안녕하세요. 말하는오이입니다! 감자!감자!감자!
//출력 안녕하세요. 말하는당근입니다! 당근!당근!당근!

 

+ 추가자료

 

자바스크립트 메소드 정리📚

 

객체 심화

 

const obj = {
  x: 1,
  y: 2,
  z: 3,
};
for (key in obj) {
  console.log(key);
}

//출력
//x
//y
//z

 

const name = '조상혁';
const country = 'KR';

const user = {
  name: name,
  country: country,
};

console.log(user);

//출력 {name: '조상혁', country: 'KR'}

 

const obj1 = {
  greeting: function () {
    console.log('Hi');
  },
};

obj1.greeting();

//출력 Hi

const obj2 = {
  x: 10,
  y: 20,
  z: 30,
};

console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));

//출력 (3) ['x', 'y', 'z']
//(3) [1, 2, 3]
//(3) [Array(2), Array(2), Array(2)]

 

객체 구조할당

 

const arr = [1, 2, 3, 4, 5];

const [one, two, three] = arr;

console.log(one, two, three);

//결과 1 2 3

const obj = [
  x: 10,
  y: 20,
];

const {x: hello ,y: world} = obj;

console.log(hello,world);

//결과 10 20

 

const obj1 = {
  one: {
    two: {
      three: 'Bingo',
    },
  },
};

const {
  one: {
    two: { three: hello },
  },
} = obj1;

console.log(hello);

// Bingo

 

이벤트

const button = document.querySelector('button');
const removeButton = document.querySelector('.remove');

function handler(event) {
  console.log('★');
}

function removeHandler(event) {
  button.removeEventListener('click', hander);
}

button.addEventListener('click', handler);
removeButton.addEventListener('click', removeHandler);