String 对象

js 中的字符串类似只读的数组，
因为只读，使用数组原型上的push，pop，sort，reverse，splice 等会修改字符串会导致错误

生成字符串

构造函数

var s = new String(s)
var s = String(s)

字面量

var s= 'adf'

转义字符串

console.log('\'hello\'\0\'world\'')

使用\拼接

可以在每行末尾使用反斜杠字符（“\”），以指示字符串将在下一行继续。确保反斜杠后面没有空格或c任何除换行符之外的字符或缩进; 否则反斜杠将不会工作。

let longString = "This is a very long string which needs \
to wrap across multiple lines because \
otherwise my code is unreadable.";

获取字符串长度

length

中文和英文的长度都是1，所以这个长度不是字符数

var text  = 'Hello World!';
text.length // 12
var text = '你好!'
text.length // 3

获取单个字符串

通过下标取

var string = 'hello world';
string[0] // output h

charAt

charCodeAt://返回Unicode编码
var str= '你好Hello world!'
str.charAt(3) //H
str.charAt(0) //你
str.charAt(100) //“”
str.charAt(-1) //“"

判断字符串是否包含其他字符串

var s = 'hello';
s.includes('he') // output true
s.includes('ho') // output false

查找字符串

indexOf lastIndexof

lastIndexof 从最后往前找
大小写敏感

var str ='Hello worlod';
str.indexOf('H') // 0
str.indexOf('lo') // 3 第一次出现的位置
str.indexOf('Hee') // -1
str.indexOf(' ') //5

拼接字符串

concat

var str1 = ‘hello ’;
var str2 = ‘world’;
str1.concat(str2); // hello world
//用+更加方便
str1 + str2

字符串切片

substring

str.substring(indexStart[, indexEnd])

方法用于提取字符串中介于两个指定下标之间的字符。
如果start>end 两个参数会互换，如果相等返回空字符串

slice

大小写转换

toLowerCase toUpperCase;

字符串分割成数组

split

stringObject.split(separator,howmany可选)
var str="How are you doing today?"
str.split(“ “) //["How", "are", "you", "doing", "today?”]
str.split(“”) //["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?”]
str.split(“,”) //["How are you doing today?"]

var s = 'test'
Array.prototype.join.call(s) // => t,e,s,t
Array.prototype.join.call(s', "") // => test

补白

padStart&padEnd

for (let i = 1; i < 200; i+=50) {
    console.log(i.toString().padStart(4, '*#'))
}
/* 
*#*1
*#51
*101
*/

模板字符串

一般情况

var name = 'moe'
var txt=`hello ${name}`
var firstName = 'jack'
var lastName = 'ma'
// 老的拼接
var name = ‘My name is ‘ + firstName + ‘ ' + lastName
// 模板拼接
var name = `My name is ${firstName} ${lastName}`

多行字符串

console.log("string text line 1\n\
string text line 2”);
console.log("string text line 1\nstring text line 2");
// 在模板字符串中，空格、缩进、换行都会被保留
console.log(`string text line 1
string text line 2`);
// 输出都一样
// "string text line 1
// string text line 2"

嵌入表达式

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20.”
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

嵌入三元表达式

var b = true
var s = `是 ${b ? '真': '假'}`

数组

arr = [1,2,3]
message = `${arr}`
"1,2,3"

支持嵌套

let arr = [{value: 1}, {value: 2}];
let message = `
    <ul>
        ${arr.map((item) => {
            return `
                <li>${item.value}</li>
            `
        }).join('')}
    </ul>
`;

String.raw:

是用来获取一个模板字符串的原始字符串的，比如说，占位符（例如 ${foo}）会被处理为它所代表的其他字符串，而转义字符（例如 \n）不会。

var text = String.raw`"\n" is taken literally. It'll be escaped instead of interpreted.` 
console.log(text)
// "\n" is taken literally.
// It'll be escaped instead of interpreted.

标签模板

模拟内部的默认实现

// 调用
tag`Hello, ${ name }. I am ${ emotion } to meet you!`
// 转化为
tag(
['Hello, ', '. I am ', ' to meet you!'],
'Maurice',
'thrilled'
)
function tag(parts, ...values) {
// value[-1] + parts[0] + value[0] + parts[1] + value[1]  
    return parts.reduce(
        (all, part, index) => all + values[index - 1] + part )
    }

let x = 'Hi', y = 'Kevin';
var res = message`${x}, I am ${y}`;
console.log(res);
// literals 文字
// 注意在这个例子中 literals 的第一个元素和最后一个元素都是空字符串
function message(literals, value1, value2) {
    console.log(literals); // [ "", ", I am ", "" ]
    console.log(value1); // Hi
    console.log(value2); // Kevin
}
function message(literals, ...values) {
    let result = '';
    for (let i = 0; i < values.length; i++) {
        result += literals[i];
        result += values[i];
    }
    result += literals[literals.length - 1];
    return result;
}
function message(literals, ...values) {
    let result = literals.reduce((prev, next, i) => {
        let value = values[i - 1];
        return prev + value + next;
    });
    return result;
}

let name = 'zbj'
function strFunc (strings,name) {
    console.log(strings,name)
    let showName
    if (name === 'zbj') {
        showName = '帅哥'
    } else {
        showName = '垃圾'
    }
    return `${strings[0]} ${showName} ${strings[1]}`
}
let showTxt = strFunc`hello${name}?`

防止 XSS 攻击

可以用它来自动确保模板中插入表达式的安全性。
我们可以虚构一个 sanitize 库来移除 HTML 标签和类似的危 害，从而阻止用户在网站中注入恶意的 HTML，防止跨域脚本(XSS， cross-site scripting)攻击。

function sanitized(parts, ...values) {
    return parts.reduce((all, part, index) =>
    all + sanitize(values[index - 1]) + part )
}
var comment = 'Evil comment<iframe src="http://evil.corp"></iframe>'
var html = sanitized`<div>${ comment }</div>` console.log(html)
// <- '<div>Evil comment</div>'

题目

var str0 = 'yiifaa',
str1 = new String(str0),
str2 = String(str0)
//请确认以下的判断是否准确
str1 === str0
//
str2 === str0
//
typeof str1 === typeof str2

答案

//  类型为string，为基本类型
typeof str0
//  类型为object，为引用类型
typeof str1
//  类型为string，为基本类型
typeof str2

//  false， 因为str1为引用类型
str1 === yiifaa
//  true， 因为都是基本类型，并且值相等
str2 === yiifaa
// false， 虽然都是字符串，但分别为object与string
typeof str1 === typeof str2

总结：
很神奇的String对象，一方面可以作为基本类型，另一方面还可以作为引用类型，更神奇的是，为String.prototype添加方法，基本类型还可以引用到，怎么做到的？自动转为包装对象