ES6字串
ES6, 全稱 ECMAScript 6.0 ,是 JavaScript 的下一個版本標準,2015.06 發版。 |
repeat():返回新的字串,表示將字串重複指定次數返回。
console.log("Hello,".repeat(2)); // "Hello,Hello,"
如果引數是小數,向下取整
console.log("Hello,".repeat(3.2)); // "Hello,Hello,Hello,"
如果引數是 0 至 -1 之間的小數,會進行取整運算,0 至 -1 之間的小數取整得到 -0 ,等同於 repeat 零次
console.log("Hello,".repeat(-0.5)); // ""
如果引數是 NaN,等同於 repeat 零次
console.log("Hello,".repeat(NaN)); // ""
如果引數是負數或者 Infinity ,會報錯:
console.log("Hello,".repeat(-1)); // RangeError: Invalid count value console.log("Hello,".repeat(Infinity)); // RangeError: Invalid count value
如果傳入的引數是字串,則會先將字串轉化為數字
console.log("Hello,".repeat("hh")); // "" console.log("Hello,".repeat("2")); // "Hello,Hello,"
padStart:返回新的字串,表示用引數字串從頭部(左側)補全原字串。
padEnd:返回新的字串,表示用引數字串從尾部(右側)補全原字串。
以上兩個方法接受兩個引數,第一個引數是指定生成的字串的最小長度,第二個引數是用來補全的字串。如果沒有指定第二個引數,預設用空格填充。
console.log("h".padStart(5,"o")); // "ooooh" console.log("h".padEnd(5,"o")); // "hoooo" console.log("h".padStart(5)); // " h"
如果指定的長度小於或者等於原字串的長度,則返回原字串:
console.log("hello".padStart(5,"A")); // "hello"
如果原字串加上補全字串長度大於指定長度,則截去超出位數的補全字串:
console.log("hello".padEnd(10,",world!")); // "hello,worl"
常用於補全位數:
console.log("123".padStart(10,"0")); // "0000000123"
模板字串相當於加強版的字串,用反引號 `,除了作為普通字串,還可以用來定義多行字串,還可以在字串中加入變數和表示式。
基本用法
普通字串
let string = `Hello'\n'world`; console.log(string); // "Hello' // 'world"
多行字串:
let string1 = `Hey, can you stop angry now?`; console.log(string1); // Hey, // can you stop angry now?
字串插入變數和表示式。
變數名寫在 ${} 中,${} 中可以放入 JavaScript 表示式。
let name = "Mike"; let age = 27; let info = `My Name is ${name},I am ${age+1} years old next year.` console.log(info); // My Name is Mike,I am 28 years old next year.
字串中呼叫函式:
function f(){ return "have fun!"; } let string2= `Game start,${f()}`; console.log(string2); // Game start,have fun!
注意要點
alert`Hello world!`; // 等價於 alert('Hello world!');
當模板字串中帶有變數,會將模板字串引數處理成多個引數。
function f(stringArr,...values){ let result = ""; for(let i=0;i<stringArr.length;i++){ result += stringArr[i]; if(values[i]){ result += values[i]; } } return result;}let name = 'Mike';let age = 27;f`My Name is ${name},I am ${age+1} years old next year.`;// "My Name is Mike,I am 28 years old next year." f`My Name is ${name},I am ${age+1} years old next year.`;// 等價於f(['My Name is',',I am ',' years old next year.'],'Mike',28);
過濾 HTML 字串,防止使用者輸入惡意內容。
function f(stringArr,...values){ let result = ""; for(let i=0;i<stringArr.length;i++){ result += stringArr[i]; if(values[i]){ result += String(values[i]).replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">"); } } return result;}name = '<Amy&MIke>';f`<p>Hi, ${name}.I would like send you some message.</p>`;// <p>Hi, <Amy&MIke>.I would like send you some message.</p>
國際化處理(轉化多國語言)
i18n`Hello ${name}, you are visitor number ${visitorNumber}.`; // 你好**,你是第**位訪問者
原文地址:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31559985/viewspace-2702467/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- ES6 proxy,字串,字串
- ES6操作字串字串
- ES6 - 字串模板與新增字串方法字串
- ES6 系列之模板字串字串
- ES6學習-字串模板字串
- 深入解析 ES6:模板字串字串
- es6 字串的擴充套件字串套件
- ES6折騰記- 模板字串字串
- ES6 -- 模板字串使用方法字串
- ES6之字串擴充套件字串套件
- ES6的全新特性:模板字串字串
- ES6模板字串的實現原理字串
- ES6語法學習之字串模板及字串查詢字串
- 重讀《深入理解ES6》—— 模板字串字串
- 【ES6基礎】模板字串(Template String)字串
- ES6字串的擴充套件字串套件
- ES6裡關於字串的擴充字串
- ES6語法(一)塊級作用域、字串字串
- ES6學習筆記(一)【變數,字串】筆記變數字串
- ES6入門之字串的擴充套件字串套件
- ES6刪除字串中重複的元素字串
- ES6字串轉換為陣列字串陣列
- 【深入淺出ES6】字串與正規表示式字串
- 字串的擴充套件 —— ES6基礎總結(四)字串套件
- ES6學習第三節:字串的擴充套件字串套件
- ES6,Angular,React和ABAP中的StringTemplate(字串模板)AngularReact字串
- JavaScript字串操作方法總結(含ES6方法)JavaScript字串
- ES6, Angular,React和ABAP中的String Template(字串模板)AngularReact字串
- JavaScript回顧00:字串,陣列,物件和ES6新特性JavaScript字串陣列物件
- 瞭解ES6中的模板字串的標籤函式字串函式
- ES6學習筆記4--字串的擴充套件筆記字串套件
- ES6新特性總結之解構賦值和字串模板賦值字串
- 寶付使用ES6模板字串完成react中css-in-js實現字串ReactCSSJS
- js--你需要知道的字串使用方法(含es6及之後)JS字串
- ES6學習筆記--es6簡介筆記
- 字串-字串分割字串
- es6 symbolSymbol
- ES6模組