자바스크립트 템플릿 문자열이란 무엇입니까?

템플릿 문자열은 ES6에 도입된 새로운 문자열 리터럴로, 일반 문자열에서 큰따옴표와 작은따옴표 대신 백틱을 사용하는 향상된 버전의 문자열입니다. 템플릿 리터럴을 사용하면 문자열에 작은따옴표와 큰따옴표를 모두 사용할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

템플릿 리터럴은 삽입된 표현식을 허용하는 문자열 리터럴입니다. ES6에 도입된 새로운 문자열 리터럴입니다. 여러 줄 문자열과 문자열 보간 기능을 사용할 수 있습니다. ES2015 사양의 이전 버전에서는 "템플릿 문자열"이라고 불렀습니다.

템플릿 문자열은 일반 문자열의 큰따옴표와 작은따옴표 대신 백틱(` `)을 사용합니다. 템플릿 문자열에는 특정 구문(${expression})에 대한 자리 표시자가 포함될 수 있습니다. 자리 표시자의 표현식과 주변 텍스트는 모든 부분을 연결하는 기본 함수로 함께 전달됩니다. 템플릿 문자열이 표현식으로 시작하는 경우 해당 문자열을 태그된 템플릿 문자열이라고 하며 이 표현식은 일반적으로 함수입니다. , 이는 템플릿 문자열이 처리된 후에 호출됩니다. 이 함수를 사용하여 최종 결과를 출력하기 전에 템플릿 문자열에 대해 작업을 수행할 수 있습니다. 템플릿 문자열 내에서 백틱(`)을 사용하는 경우 그 앞에 이스케이프 문자()를 추가해야 합니다.

`\`` === "`" // --> true

템플릿 문자열은 일반 문자열로 사용할 수 있고 여러 줄 문자열을 정의하거나 문자열에 변수를 포함하는 데 사용할 수도 있습니다.

일반적인 사용법은 다음과 같습니다.

// 使用 ` 符号包裹的字符串称为模板字符串
let str = `this is str`
console.log(typeof str, str); //string this is str

여러 줄 템플릿 문자열

ECMAScript 2015에서 제공하는 템플릿 문자열과 일반 문자열의 차이점은 템플릿 문자열의 공백, 들여쓰기 및 줄바꿈이 유지된다는 점입니다. .

샘플 코드는 다음과 같습니다.

let str = `this 
      is str`
console.log(typeof str, str);
/*
  string this 
      is str
*/

1. 표현식이 포함된 템플릿 문자열

템플릿 문자열은 포함된 표현식을 지원하며 구문 구조는 다음과 같습니다.

`${expression}`

샘플 코드는 다음과 같습니다.

let str1 = `this is str1`
let str2 = `this is str2`
// 只需要将表达式写入 ${} 中
let and = `${str1} and ${str2}`
console.log(and); // this is str1 and this is str2

태그됨 템플릿 문자열

템플릿 문자열의 기능은 위의 기능만 있는 것이 아닙니다. 이 템플릿 문자열을 처리하기 위해 호출될 함수의 이름 뒤에 올 수 있습니다. 이를 태그된 템플릿 기능이라고 합니다.

let str = 'str'
console.log`this is ${str}`;
// 等同于
console.log(['this is ', ''], str);

태그 템플릿은 사실 템플릿이 아니고 함수 호출의 특별한 형태입니다. "레이블"은 함수를 참조하고 바로 뒤에 오는 템플릿 문자열이 해당 매개변수입니다.

Raw string

태그 함수의 첫 번째 매개변수에는 raw라는 특수 속성이 있는데, 이를 통해 특별히 대체된 문자 대신 템플릿 문자열의 원래 문자열에 액세스할 수 있습니다.

샘플 코드는 다음과 같습니다.

/*
  原始字符串 应用在带标签的模板字符串中
  * 在函数的第一个参数中存在 raw 属性，该属性可以获取字符串的原始字符串。
  * 所谓的原始字符串，指的是模板字符串被定义时的内容，而不是处理之后的内容
*/
function tag(string) {
  console.log(string.raw[0]);
}
tag `string test line1 \n string test line2` // string test line1 \n string test line2

또한 String.raw() 메서드를 사용하여 기능 키의 원본 문자열을 가져오는 것은 기본 템플릿 함수 및 문자열 연결 생성과 동일합니다.

샘플 코드는 다음과 같습니다.

let str = String.raw `Hi\n${2+3}!`;
// ，Hi 后面的字符不是换行符，\ 和 n 是两个不同的字符
console.log(str); // Hi\n5!

문자열 포함 여부 확인

1.cludes() 메서드

includes() 메서드는 문자열을 기준으로 다른 문자열에 포함되어 있는지 확인하는 데 사용됩니다. 판단 결과는 참 또는 거짓을 반환합니다.

구문 구조는 다음과 같습니다.

str.includes(searchString[, position])

매개변수 설명:

• searchString: 이 문자열에서 검색할 문자열입니다.

• 위치: (선택 사항) 하위 문자열 검색을 시작할 현재 문자열의 인덱스 위치입니다. 기본값은 0입니다.

includes() 메서드는 대소문자를 구분한다는 점에 주목할 가치가 있습니다.

샘플 코드는 다음과 같습니다.

let str = 'abcdef';
console.log(str.includes('c')); // true
console.log(str.includes('d')); // true
console.log(str.includes('z')); // false
console.log(str.includes('A')); // false

ECMAScript 2015에서 제공하는 include() 메서드는 대소문자를 구분합니다. 이제 대소문자를 구분하지 않는 메서드를 직접 확장합니다.

샘플 코드는 다음과 같습니다.

String.prototype.MyIncludes = function (searchStr, index = 0) {
  // 将需要判断的字符串全部改成小写形式
  let str = this.toLowerCase()
  // 将传入的字符串改成小写形式
  searchStr = searchStr.toLowerCase();
  return str.includes(searchStr, index)
}
let str = 'abcdef';
console.log(str.MyIncludes('c')); // true
console.log(str.MyIncludes('d')); // true
console.log(str.MyIncludes('z')); // false
console.log(str.MyIncludes('A')); // true

2. startWith() 메서드

startsWith() 메서드는 현재 문자열이 다른 주어진 하위 문자열로 시작하는지 확인하고 확인 결과에 따라 true 또는 false를 반환하는 데 사용됩니다.

구문 구조는 다음과 같습니다.

str.startsWith(searchString[, position])

매개변수 설명:

• searchString: 이 문자열에서 검색할 문자열입니다.

• 위치: (선택 사항) 하위 문자열 검색을 시작할 현재 문자열의 인덱스 위치입니다. 기본값은 0입니다.

startsWith() 메서드는 대소문자를 구분한다는 점에 주목할 가치가 있습니다.

샘플 코드는 다음과 같습니다.

let str = 'abcdef';
/*
  * startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头， 并根据判断结果返回 true 或 false。
  * str.startsWith(searchString[, position])
    参数说明
      searchString: 要在此字符串中搜索的字符串。 
      position: (可选) 从当前字符串的哪个索引位置开始搜寻子字符串， 默认值为 0。
  !值得注意的是startsWith() 方法是区分大小写的。
*/
console.log(str.startsWith('a')); // true
console.log(str.startsWith('c', 2)); // true
console.log(str.startsWith('c')); // flase

3.endsWith() 메서드

endsWith() 메서드는 현재 문자열이 다른 특정 하위 문자열로 "끝나는지" 확인하고 확인 결과에 따라 true를 반환하거나 false를 반환하는 데 사용됩니다. .

구문 구조는 다음과 같습니다.

str.endsWith(searchString[, position])

매개변수 설명:

• searchString: 이 문자열에서 검색할 문자열입니다.

• 위치: (선택 사항) 하위 문자열 검색을 시작할 현재 문자열의 인덱스 위치입니다. 기본값은 0입니다.

endWith() 메서드는 대소문자를 구분한다는 점에 주목할 가치가 있습니다.

샘플 코드는 다음과 같습니다.

let str = 'abcdef';
console.log(str.endsWith('f')); // true
console.log(str.endsWith('c', 3)); // true
console.log(str.endsWith('c')); // flase

다음 두 가지 방법을 사용하면 대소문자를 구분하지 않고 직접 확장할 수 있습니다.

【관련 권장 사항: javascript 학습 튜토리얼】

위 내용은 자바스크립트 템플릿 문자열이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!