Es6(字符串)+(函数)

181 阅读3分钟

字符串的扩展:

ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。
但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。
如果直接在\u后面跟上超过0xFFFF的数值(比如\u20BB7),JavaScript 会理解成\u20BB+7。由于\u20BB是一个不可打印字符,所以只会显示一个空格,后面跟着一个7

"\u0061"
// "a"

"\uD842\uDFB7"
// "𠮷"

"\u20BB7"
// " 7"

image.png

注:JavaScript 共有 6 种方法可以表示一个字符。

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

遍历接口:

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"
let text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "𠮷"

字符串text只有一个字符,但是for循环会认为它包含两个字符(都不可打印),而for...of循环会正确识别出这一个字符。

模板字符串:
原生js:

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

es6简写:

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

多行字符串:

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。

例如:

let greeting = `\`Yo\` World!`;

字符串引用对象属性:

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

模板语法:

原生js:

echo('<ul>');
for(let i=0; i < data.supplies.length; i++) {
  echo('<li>');
  echo(data.supplies[i]);
  echo('</li>');
};
echo('</ul>');

se6:

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

放置了一个常规模板。该模板使用<%...%>放置 JavaScript 代码,使用<%= ... %>输出 JavaScript 表达式。

标签模板:

alert`hello`
// 等同于
alert(['hello'])
let age = 22;
   var tag = function(arr,arg){
     console.log(arr);
     console.log(arg) 
   }
   tag`my age is ${ age }`;

image.png

从上可以看出,arr是一个数组,存的是字符串里面可以处理非变量的内容,而后面的参数列表一次是你的每一个变量。

let name = 'Joh';
let qq = '56655';
function log() {
 return 'Hi there!';
}
let html = `
 <div>
  <ul>
    <li>${ name === 'Joh' ? 'is Joh' : 'not Joh'}</li>
    <li>${qq}</li>
    <li>${log()}</li>
  <ul>
 </div>
`
console.log(html);

image.png

===============================函数=============================

函数实例:

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

函数默认值:

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined
function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

如果没有提供参数,函数foo的参数默认为一个空对象。

箭头函数:

原生:

  function f(){
        console.log("f");
    } 
    f();

表达式:

let f=function(){
        console.log("f");
    }
    f();

箭头函数:

let f=()=>{}
   //   let f=(参数)=>{函数}
let sum=(a,b)=>{return a+b};
 //()  当参数有且只有一个的时候,可以省略小括号
 //{}   有且只有一条语句的时候,可以省略   单条语句的return必须省略
 console.log(sum(1,2));
  
//{}   有且只有一条语句的时候,可以省略   单条语句的return必须省略
let su=(a,b)=>a+b;
console.log(su(1,2));

let add=()=>console.log(0);

image.png