LHJ

I'm a FE developer.

13-7. Array 오브젝트(ES3 기준) / 엘리먼트 값을 문자열로 변환

02 Dec 2020 » js_beginner

13-7. Array 오브젝트(ES3 기준) / 엘리먼트 값을 문자열로 변환

join()

구분데이터(값)
data기준
파라미터분리자opt, 디폴트: 콤마(,)
반환연결한 문자열

분리자 작성은 선택이고, 작성하지 않으면 디폴트 값은 콤마(,) 입니다.

  • 엘리먼트와 분리자를 하나씩 결합하여 문자열로 연결

    • [0]인덱스,분리자,[1]인덱스,분리자

  • 마지막 엘리먼트는 분리자를 연결하지 않음

      var value = [1, 2, 3];
  var result = value.join("##");
  console.log(result); // 1##2##3
  console.log(typeof result); // string

  • 파라미터를 작성하지 않으면 콤마로 분리

      var value = [1, 2, 3];
  var result = value.join();
  console.log(result); // 1,2,3

  • 파라미터에 빈문자열 작성

      var value = [1, 2, 3];
  var result = value.join("");
  console.log(result); // 123
    1. 엘리먼트 값만 연결하여 반환
    2. 사용 빈도수가 높습니다.
    3. 데이터로 HTML의 마크업을 만들어 한 번에 표시할 때 사용
      예) <table>

    서버에서 데이터를 받아 테이블로 표시를 할 때, 서버의 데이터를 마크업으로 만들어서 한 번에 push를 하는 겁니다.
    그래서 한번만 렌더링 되도록 하는 겁니다.
    이전에도 한번 말씀드렸었죠?

toString()

구분데이터(값)
data변환 대상
파라미터사용하지 않음
반환변환한 값

  • 배열의 엘리먼트 값을 문자열로 연결

    • 콤마로 엘리먼트를 구분

        var result = ["A", "B", "C"].toString();
  console.log(result); // A,B,C
  console.log([["가"], ["다"]].toString()); // 가,다
      1. 2차원 배열의 각 엘리먼트 값을 1차원 배열로 펼치고
      2. 다시 1차원을 문자열로 연결하여 반환합니다.

toLocaleString()

구분데이터(값)
data변환 대상
파라미터사용하지 않음
반환변환한 값

  • 엘리먼트 값을 지역화 문자로 변환

    • 문자열을 콤마로 연결하여 반환

        var value = [12.34, 56];
  console.log(value.toLocaleString("zh-Hans-CN-u-nu-hanidec")); // 一二.三四,五六

코딩 시간

  • 요구사항

      <ul>
      <li id="id1">id1</li>
      <li id="id2">id2</li>
  </ul>
  • JS로 <li>를 10개 만들어 웹 페이지에 표시합니다.
  • #id1에서 1은 일련번호로 1부터 10까지 사용합니다.

  • 조건

    • for() 사용
    • push(), join() 사용
      즉, 문자열을 배열 끝에 첨부한 후 엘리먼트를 문자열로 결합

  • 힌트

    • document.body.innerHTML = 결합한 문자열;
    • 결합한 문자열을 <body>의 차일드로 첨부하게되며, 리스트가 표시됩니다.
var list = [];
for (var i = 0; i < 10; i++) {
    list.push("<li id='id"+ (i+1) +"'>id"+ (i+1) +"</li>");
}
list.unshift("<ul>");
list.push("</ul>");
var listHtml = list.join("");

document.body.innerHTML = listHtml;

Related Posts