EX6新增的字符串

原创

阿里CTO 2022-07-22 14:41:15 博主文章分类：ES6 ©著作权

©著作权归作者所有：来自51CTO博客作者阿里CTO的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
////ES5：
////普通中文：U+4位16进制
////生僻字：两个四位十六进制
var str = "𠮲";
console.log(str.charCodeAt(0));//55362(被转为了10进制)
console.log(str.charCodeAt(1));//57266
console.log(String.fromCharCode(55362))//显示个错误字符
console.log(String.fromCharCode("0xD8420xDFB2"))//空

////ES6:
////生僻字：5位16进制
 console.log(str.codePointAt())//134066
 console.log(String.fromCodePoint(134066))//𠮲
//
////也可用来显示正常字符
 var str = "中";
 console.log(str.codePointAt())//20013
 console.log(String.fromCodePoint(20013))//



// for-of 等同于for in;但是不能转换对象
 var str = "hello world";
 var arr = [3,4,5,6,7];
 var obj = {a:10,b:20,c:30}
//for-in
for(var i in str){
     console.log(i)//0 1 2 3 4 6 7 8 9 1 0
    console.log(str[i]);//h e l l o  w o r l d
}
for(var i in arr){
    console.log(i)//0 1 2 3 4
    console.log(arr[i]);//3 4 5 6 7
}
for(var i in obj) {
    console.log(i)//a b c
    console.log(obj[i]);//10 20 30
//}
    
//for-of
 for(var i of obj){
     console.log(i)
 } //报错
for(var i of arr){
    console.log(i)//3 4 5 6 7都不用加数组名
}
var s = "abc";
for(let  b of s){
    console.log(b) // "a"  "b"  "c"
}

//4.字符串模版扩展：
//
//ES6中存在一种新的字符串， 这种字符串是 以 ` `  (波浪线上的那个字符 > 反引号)括起来表示的；
//
//        通常我们想要拼接一个带有标签的字符串， 是用这样的方式: bianliang + " <strong>这是一个文字" + obj.name + "</strong> " + bianliang

//但是有了ES6字符串一切都变得非常简单了;
//
//` ${bianliang} <strong>这是一个文字${obj.name}</strong>${bianliang} `
//用 ${ } 扩住变量让拼接变得非常容易;
//demo:ES5情况下：
    var a = "很好";
     console.log("今天天气'"+a+"'");//今天天气'很好'

console.log("今天天气'坏'");//今天天气'坏'

console.log("今天天气'"+ a +"'");//今天天气'很好'


console.log("今"+
     "天"+
     "天气'"+ a +"'");//今天天气'很好'

//    但是到了ES6通过 ` `
console.log(`今天天气'坏'`);//今天天气'坏'

console.log(`今天天气'${a}'`);//今天天气'很好'


console.log(`今天天气"${a}"`);//今天天气"很好"

console.log(`今天天气"${a+"哈哈哈"}"`);//今天天气"很好哈哈哈"


console.log(`今天天气"${fn()}"`);//今天天气"嘿嘿嘿嘿"
function fn(){
    return "嘿嘿嘿嘿"
}

</script>
</html>