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

最新推荐文章于 2024-04-03 07:03:59 发布

原创最新推荐文章于 2024-04-03 07:03:59 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6字符串扩展 #字符串的方法 #es6

ES6 专栏收录该内容

6 篇文章

订阅专栏

这篇博客详细介绍了ES6中字符串的三个新方法：includes()、startsWith()和endsWith()，它们分别用于检查字符串是否包含指定子串，是否以指定子串开头和是否以指定子串结束。此外，还讨论了repeat()方法，它用于重复字符串一定次数。最后，重点讲解了模板字符串（template string）的使用，包括如何定义多行字符串，如何嵌入变量和表达式，以及其与普通字符串的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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