字符串扩展
1、includes()、startsWith()、endsWith()
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
第一个参数:字符;
第二个参数:表示开始搜索的位置;endsWith方法针对前n个字符,其他针对从第n个位置直到字符串结束。
2、repeat()
返回一个新字符串,表示将原字符串重复n次。
参数:
- 如果是小数,会向下取整;
- 如果为小于等于-1的负数或者Infinity,会报错;
- NaN等同于0;
- 字符串先转换呈数字。
var str = "hello world";
str.includes("h"); //true
str.startsWith("h");//true
str.endsWith("d");//true
str.startsWith("el", 1);//true 从位置1开始
str.endsWith("el", 3);//true 前3个字符包括
str.endsWith("el", 4);//false
str.endsWith("llo", 5);//true
str.endsWith("llo ", 6);//true
str.includes("wor", 6);//true 从6位置开始
var str = "*";
str.repeat(2); //"**"
str.repeat(2.2); //"**" 小数会向下取整
str.repeat(-0.3); //""
str.repeat(-2);//Uncaught RangeError: Invalid count value
str.repeat(-1.0); //Uncaught RangeError: Invalid count value
str.repeat(Infinity); // Uncaught RangeError: Invalid count value
str.repeat(NaN); // ""
str.repeat(null); // ""
str.repeat(undefined); // ""
str.repeat('na') // ""
'na'.repeat('3') // "nanana"
3、模板字符串(template string)
反引号(`)标识:可当做普通字符串,可定义多行字符串,也可在字符串中嵌入变量
- 模板字符串中需使用反引号则要添加转义\;
- 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中;
- trim() 方法用于删除字符串的头尾空格。不会改变原始字符串;
- 模板字符串甚至还能嵌套。
嵌入变量方式:${变量名}
- {}内可用js表达式进行运算,可引用对象属性,可调用函数;
- 如果{}中值不是字符串,将按照一般规则转为字符串;
- 如果模板字符串中变量没有声明,将报错
let [name1, name2] = ["Tom", "Jack"];
var str1 = "hello world! This is an amazing message!";
console.log(str1);
var str2 = `Today is a funny day,
we have dinner tonight,
${name1} and ${name2} are good friends`; //字符串中通过${}嵌入变量
console.log(str2);//保留输出格式
var str3 = " string";
console.log(str3.trim());//"string" trim()用于删除首尾空格
console.log(str3);//" string"
let num1 = 11;
let num2 = 22;
let str4 = `${num1} + ${num2} = ${num1+num2}`;
console.log(str4);//可进行运算
let msg = `Good morning, ${name3}`;//没有声明,将报错
//模板字符串的嵌套应用
const data = [
{ first: '<Jane>', last: 'Bond' },
{ first: 'Lars', last: '<Croft>' },
];
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
console.log(tmpl(data));
//引用模板字符串自身
// 写法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"
// 写法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null, str);
func('Jack') // "Hello Jack!"
模板编译:(待完善)
在模板字符串之中,放置了一个常规模板。该模板使用<%…%>放置 JavaScript 代码,使用<%= … %>输出 JavaScript 表达式。
let template = `
<ul>
<% for(let i=0; i < data.supplies.length; i++) { %>
<li><%= data.supplies[i] %></li>
<% } %>
</ul>
`;
原文地址:https://blog.csdn.net/weixin_43955911/article/details/88819663
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。