ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ES6读书笔记——字符串扩展

2019-03-26 14:55:11  阅读:157  来源: 互联网

标签:ES6 repeat 读书笔记 let str 字符串 true 模板


字符串扩展

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>
	`;

标签:ES6,repeat,读书笔记,let,str,字符串,true,模板
来源: https://blog.csdn.net/weixin_43955911/article/details/88819663

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有