목차
Label 템플릿:
실용적인 메서드 세트
1. 문자열 탐색 인터페이스
2.includes(), startWith(), endWith()
3.repeat()
4.padStart(), padEnd()
웹 프론트엔드 JS 튜토리얼 ES6 문자열에 대한 매우 실용적인 지식 소개

ES6 문자열에 대한 매우 실용적인 지식 소개

Mar 11, 2019 pm 04:33 PM
javascript

이 기사는 ES6 문자열에 대한 매우 실용적인 지식을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

템플릿 문자열

1. 여러 줄의 문자열을 작성할 수 있습니다

2. ${}를 사용하여 변수를 추가하세요

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
로그인 후 복사

템플릿 문자열에서 함수를 호출할 수도 있습니다

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar
로그인 후 복사

템플릿 문자열을 중첩할 수도 있습니다

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;
로그인 후 복사

Label 템플릿:

let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;

function passthru(literals) {
  let result = '';
  let i = 0;

  while (i < literals.length) {
    result += literals[i++];
    if (i < arguments.length) {
      result += arguments[i];
    }
  }

  return result;
}

msg // "The total is 30 (31.5 with tax)"
로그인 후 복사

리터럴 매개변수는 변수가 아닌 배열입니다. 변수의 원래 위치는 배열의 요소 사이에 있습니다. 위의 예는 다양한 매개변수를 원래 위치에 따라 다시 배치하는 방법을 보여줍니다.

  • "태그 템플릿"의 중요한 응용 프로그램은 사용자가 악성 콘텐츠를 입력하지 못하도록 HTML 문자열을 필터링하는 것입니다.

실용적인 메서드 세트

1. 문자열 탐색 인터페이스
for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"
로그인 후 복사
2.includes(), startWith(), endWith()
let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
로그인 후 복사

이 세 가지 메서드는 모두 검색 시작 위치를 나타내는 두 번째 매개 변수를 지원합니다.

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
로그인 후 복사

위 코드는 두 번째 매개변수 n을 사용할 때 endWith가 다른 두 메서드와 다르게 동작한다는 것을 나타냅니다. 처음 n자를 대상으로 하는 반면, 다른 두 가지 방법은 n번째 위치부터 문자열 끝까지를 대상으로 합니다.

3.repeat()

repeat 메소드는 새 문자열을 반환하는데, 이는 원래 문자열을 n번 반복한다는 의미입니다.

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
로그인 후 복사

4.padStart(), padEnd()

padStart()
로그인 후 복사

는 머리 완성에 사용되고,

padEnd()
로그인 후 복사

는 꼬리 완성에 사용됩니다.

rreeerrree

위 내용은 ES6 문자열에 대한 매우 실용적인 지식 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축

자바스크립트에서 insertBefore를 사용하는 방법 자바스크립트에서 insertBefore를 사용하는 방법 Nov 24, 2023 am 11:56 AM

자바스크립트에서 insertBefore를 사용하는 방법

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법

See all articles