ES6之 字符串

本文介绍JavaScript中字符串的各种实用操作,包括转义URL字符、遍历字符串、搜索与判断字符串、重复字符串、以及前后填充字符串的方法。

  1.将 浏览器地址上被浏览器转义的字符转义成正常可读的字符。

        let url=unescape(window.location.href,"UTF-8")

   2. 字符串的遍历器接口 如下例

      for (let  stringValue  of   'boxpox '){

          console.log( stringValue )    //  b     o      x      p      o      x

     } 

  3 . includes() 、startsWidth()、endsWidth()

      includes():返回布尔值,表示是否找到了参数字符串。

      startsWidth(): 返回布尔值,表示参数字符串是否在原字符串的头部

      endsWidth() : 返回布尔值,表示参数字符串是否在原字符串的尾部

  这三个方法都支持第二个参数,表示开始搜索的位置。

注:使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

4. repeat方法返回一个新字符串,表示将原字符串重复n次。

  'hello'.repeat(2)  //'hellohello'

 ' hello'.repeat(0) //  ' '

  'hello'.repeat(2.9)  //  'hellohello'

  'hello '.repeat(-1)  // Error

  'hello'.repeat(-0.9) //  ' '    会先取整  -0 =0 

  ‘hello’.repeat(NaN)  //  ' '

  'hello',repeat( ' qwe')  // '  '

  ' hello',repeat( ' 2')   //  'hellohello '

5. padStart()  、padEnd()

   如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。如下例

   'x'.padStart(5,'ab')    //' ababx '

   'x'.padEnd(5,'ab')    //' xabab '

   如果省略第二个参数,默认使用空格补全长度。

  说明:padStart的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

  ‘1’.padStart(2,'0')   //01       补全  00:00:4      

          另一个用途是提示字符串格式。

        ‘09-12’.padStart(10 ,'YYYY-MM-DD' )   // 'YYYY-09-12'

 

 

<think> 在Vue中,我们经常使用ES6的模板字符串(template literals)来编写多行字符串ES6的模板字符串使用反引号(`)来定义,并且可以直接换行。例如: ```javascript const message = `这是一行 这是第二行 这是第三行`; ``` 在Vue组件的JavaScript部分,我们可以这样使用: ```javascript export default { data() { return { multiLineText: `你好, 这是一个多行字符串的例子。 在模板字符串中,换行会被保留。` } } } ``` 然而,需要注意的是,这样编写的字符串在换行处会包含换行符(\n)以及可能存在的缩进空格(比如上面例子中每行面的空格)。如果你不希望有缩进,可以这样写: ```javascript export default { data() { return { multiLineText: `你好, 这是一个多行字符串的例子。 在模板字符串中,换行会被保留,且没有多余的空格。` } } } ``` 或者,如果你希望保持代码的可读性,但不想在字符串中有缩进,可以使用数组和`join`方法,或者使用反斜杠来消除换行后的缩进(但这样就不能保留换行符了)。但通常直接换行并注意缩进即可。 在Vue的模板中,如果我们想显示多行字符串并保留换行,可以使用`<pre>`标签或者CSS的`white-space: pre-line;`。例如: ```vue <template> <div> <!-- 使用pre标签,会保留所有空格和换行 --> <pre>{{ multiLineText }}</pre> <!-- 或者使用CSS样式,这样会合并连续空格,但保留换行 --> <div style="white-space: pre-line;">{{ multiLineText }}</div> </div> </template> ``` 原因:模板字符串ES6新增的语法,它允许在字符串中嵌入表达式,并且支持多行字符串,而不需要使用繁琐的字符串连接(+)操作符。在定义多行字符串时,所有的换行和空格都会被保留在字符串中。 注意:在Vue组件的模板中,直接使用`{{}}`插值显示多行字符串时,HTML默认会忽略空白字符(包括换行符),因此我们需要使用上述的`<pre>`标签或CSS样式来保留换行效果。 §§相关问题§§: 1. 在Vue中,如何将模板字符串中的换行符转换为HTML的换行标签(<br>)? 2. 在Vue的模板中,除了使用`<pre>`标签,还有哪些方式可以保留字符串中的换行符? 3. 在Vue组件的样式中,`white-space`属性有哪些值?它们分别代表什么? 4. 在Vue中,如何使用过滤器(filter)或者计算属性(computed)来处理多行文本的显示? </think> 在 Vue 中使用 ES6 模板字符串实现换行的方法如下: ### 方法 1:直接换行(推荐) 在模板字符串中直接按 Enter 键换行: ```javascript const message = `这是第一行 这是第二行 这是第三行`; ``` ### 方法 2:使用换行符 `\n` ```javascript const message = `这是第一行\n这是第二行\n这是第三行`; ``` ### Vue 组件中的实际应用 ```vue <template> <div> <!-- 直接显示多行文本(需要CSS支持) --> <pre>{{ formattedText }}</pre> <!-- 将换行符转换为 <br> 标签 --> <div v-html="htmlText"></div> </div> </template> <script> export default { data() { return { formattedText: `用户信息: 姓名:张三 年龄:28 职业:端工程师`, // 包含换行符的文本 rawText: "第一行\n第二行\n第三行" }; }, computed: { htmlText() { // 将换行符替换为 HTML 换行标签 return this.rawText.replace(/\n/g, '<br>'); } } }; </script> <style scoped> /* 保留原始换行符格式 */ pre { white-space: pre-wrap; } </style> ``` ### 注意事项: 1. **普通 HTML 元素**会忽略字符串中的换行符(显示为空格),需要使用以下方式之一: - `<pre>` 标签 - CSS `white-space: pre` 或 `pre-wrap` - 将 `\n` 替换为 `<br>` 标签 2. **Vue 模板**中的换行会被编译器处理为单个空格 3. **JSON 数据**中直接包含的换行符会被保留 ### 原因说明: ES6 模板字符串使用反引号(`)定义,支持多行语法。在字符串内部: - 直接换行会转换为 `\n` 换行符 - 所有空格和缩进会被保留 - 支持 `${expression}` 表达式插值
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值