EtoC

텍스트 문자열 연결하기 본문

Language/JavaScript

텍스트 문자열 연결하기

게리드 2023. 7. 31. 13:35

1. 텍스트 문자열의 연결

alert함수에 텍스트를 입력하면 같은 텍스트가 항상 출력된다.
그렇다고 항상 텍스트를 교체하기는 귀찮은데 이럴때는 변수를 사용하면 변수값에따라 내용을 바꿀 수 있다.

let name = "김";
console.log("안녕하세요" + name + "씨");
// "안녕하세요 김 씨"

2. 텍스트 + 텍스트

String 과 String를 합치면 String이다.
만약 띄어쓰기를 넣고싶다면 " "를 사용하면 띄어쓰기를 포함한 문자열이 출력된다.

console.log("안녕" + "하세요");
console.log("안녕" + "하" + "세요");
console.log("안녕" + "하세" + "" + "요");
//위의 3가지 다 '안녕하세요'
console.log("안녕" + "하" + " " + "세요");
//'안녕하 세요"

let hi = "안녕";
console.log(hi + "하세요");
//'hi하세요' 가 아닌 '안녕하세요'
let ha = "하세요";
console.log(hi + ha);
//Referencd Error: hi is not defined
//''이 없어서 문자열이 아닌 변수로 인식하기때문에 에러가 난다.

3. 텍스트 + 숫자

console.log("2" + "2");

위 코드의 출력문은 '4'가 아닌 22이다.
''으로 감싸져있기 때문에 컴퓨터는 숫자가 아닌 String(문자)로 인식하고 텍스트 두개를 합쳐 22를 출력한다.

그렇다면 아래의 코드는 어떻게 출력될까?

console.log("2" + "2" + "요" + 2 + 2);
console.log(2 + 2);

22요44라고 생각할수 있는데 출력된결과는 22요224이다.

typeof연산자를 사용하여 확인해보니 문자형과 숫자형이 나왔다.

이유는 프로그래밍이 왼쪽에서부터 순서대로 실행되기때문에 문자로 인식한 것이라고한다.
그래서 뒤집어서 +를 해보았더니 똑같이 문자열이 출력되었다.

이유는 StringNumber+연산자를 사용하여 이으려고하면 자바스크립트는 먼저 Number를 String으로 바꾼뒤 더하기때문에 항상 String형으로 변환하기 때문이다.
이를 강제 유형 변환(type coercion)이라한다.

하지만 자바스크립트에서 모든 연산자가 이렇게 작동하는 것은 아니다.
예를들어 -연산자를 사용하면 자바스크립트는 StringNumber로 바꿔버린다.
만약 StringNumber로 바꿀 수 없다면 NaN(Not a Number)를 출력한다.

원래 다른 프로그래밍 언어에서는 서로 다른 type인 String과 Number는 서로 더하거나 뺄 수 없는데 JavaScript에서는 오류를 내지 않고 더하거나 뺄 수있다.
JavaScript가 다른프로그램들보다 엄격하지않기때문인데 좋게보면 유연하고, 나쁘게보면 에러가 날 가능성이 높아 단점이자 장점이라고 한다.


Assignment

index.js 에 textConcatenation 함수를 수정하여서 다음 문장이 리턴 될 수 있도록 해주세요.

"2 더하기 2는 4"
  • hint : 뒤의 2 + 2 수학식이 먼저 계산되도록 묶어주세요.

// Assignment - 다음 함수 안에 코드를 구현하세요
function textConcatenation() {
  // 다음 코드를 수정 하여
  // 아래의 문장이 올바른 값이 될 수 있도록 해주세요.
  let text = "2 더하기 2는 " + 2 + 2;

  // 다음 코드는 수정하지 마세요!
  return text;
}
function textConcatenation() {
  let text = "2 더하기 2는 " + (2 + 2);
  return text;
}

두 식의 결과값이 다른이유는 (2+2)는 숫자로 평가되는 산술 연산자이기때문이다.

"2 더하기 2는 " +( 2 + 2 )"라는 함수를 호출 했을때 "2더하기2는 "이라는 이름의 함수가 없기때문에 오류가 발생하게 된다.

()가 연결 연산자로 대체되었다고 가정하면, 괄호를 먼저 평가하여 2+2=4가 되고, 문자열의 끝에 연결되어 "2 더하기 2는 4"가 나오게된다.