JS레플릿 28.[es6]template literals, string method

Assignment

handleEdit 함수를 구현해 주세요.
쇼핑몰 회원가입에서 한 번 쯤은 아래와 같은 문구를 보셨을 겁니다.

환영합니다. 위코드님!
회원가입 기념으로 쿠폰을 적립해 드렸습니다.

이러한 문구에서는 이름 부분만 계속 바뀌고 나머지 부분은 고정됩니다. 그럼, 이름 부분을 변수로 관리 하겠죠?
그렇다면 handleEdit 라는 이름을 가진 함수를 구현해 봅시다.

이 함수는 nickname, interests 라는 두 string을 인자로 받습니다. nickname은 유저의 닉네임을, interests 는 유저의 관심사를 의미합니다.
interests 에는 여러 관심사를 적을 수 있습니다. 그 때 그 관심사의 구분을 콤마(,)를 이용합니다.
nickname 과 interests 가 문제 없이 잘 들어왔다면 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리할 겁니다.

예를 들어 입력 값이 nickname = "뚜비" , interests = "방탈출,테니스,멍 때리기" 라고 했을 때
아래와 같은 Object를 리턴하도록 구현해 주세요.

⚠️ 주의
interests 는 배열입니다.
interests 를 적을 때 콤마(,) 뒤에 스페이스는 지워주세요.

{
    nickname: "뚜비",
    interests: ["방탈출","테니스","멍 때리기"],
    bio: "제 닉네임은 뚜비입니다. 취미는 방탈출,테니스,멍 때리기입니다."
}

결과

const handleEdit = (nickname, interests) => {
  const guest = {
    nickname : nickname,
    interests : interests.split(","),
    bio : `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`
  }
  return guest;
}
const a = "뚜비";
const b = "방탈출,테니스,멍 때리기";

console.log(handleEdit(a, b));

Today I Learn

1. template literals

[ES6]에서 추가된 편리한 string구문
back tick 으로 string을 감싸면 그 안에 변수를 넣어서 표현할 수 있습니다. 변수를 사용하려면 ${} 으로 변수를 감싸줘야 합니다.

// [es5]에서는 back tick으로 string 감싸기가 안돼서 따옴표를 썼다. 
// error: 따옴표는 다음과 같이 쓸 수 없음 
let detail = '자세히 
보아야
이쁘다';
console.log(detail);

// 따옴표로 감싼 string은 줄바꿈 시 개행 문자를 입력해야함
let detail2 = '자세히\n'+'보아야\n'+'이쁘다';

// [es6]부터 back tick으로 다음과 같이 쓸 수 있음
let detail3 = `자세히 
보아야
이쁘다

내코드..`;

// back tick과 변수 사용
const name = '김개발';
const hi = `안녕하세요. 저는 ${name} 입니다.`;

2. string method

특정string 찾는 메서드:
[es5] indexOf(string의 위치를 숫자로 반환)
[es6] startsWith(특정 문자로 시작하면 true 반환),
endsWith(특정 문자로 끝나면 true 반환),
includes(특정 문자를 포함하면 true 반환)

const email = 'yealee.kim87@gmail.com';

console.log(email.startsWith('ye'));   // true
console.log(email.endsWith('com'));    // true
console.log(email.includes('@gmail')); // true

특정 문자열을 반복하는 메서드: repeat(반복 횟수)

console.log('#'.repeat(3)); // "###"