首页 > 其他分享 >ES6 拼接字符串(angular)

ES6 拼接字符串(angular)

时间:2023-04-17 16:31:47浏览次数:54  
标签:ES6 number hello 拼接 message content1 angular


angular 拼接字符串有没有什么好办法呢,发现es6可以。

拼接方式:用反引号( ` )包裹起来

特点:

  1. 模板中的内容可以有格式并可以定义多行
  2. 通过${}方式填充数据
  3. 大括号里面可以进行运算和调用函数

例子: 

// 例1
const content1 = 'hello boys!';
this.message = `hello world! ${content1}`;

ES6 拼接字符串(angular)_ES6 拼接字符串

// 例2
const content1 = 'hello boys!';
this.message = `hello world! ${content1}
  <p style="color">hello girls!</p>`;

ES6 拼接字符串(angular)_调用函数_02

// 例3
this.message = `2 + 5 = ${2 + 5}`;

ES6 拼接字符串(angular)_大括号_03

// 例4
this.message = `3 + 6 = ${this.sum(3, 6)}`;
sum (a: number, b:number):number {
  return a + b;
}

ES6 拼接字符串(angular)_拼接字符串_04

标签:ES6,number,hello,拼接,message,content1,angular
From: https://blog.51cto.com/u_12374018/6195466

相关文章

  • es6 数组对象求和
    letlist=[{id:1,price:2},{id:2,price:4},{id:3,price:6},{id:4,price:8},];letres=list.reduce((sumData,key,index,arrData)=>{console.log('a',sumData);//上⼀次调⽤回调时返回的累积值c......
  • angular开发从入门到入土第二节(组件通信)
    一.input和output1.子组件通过@Input装饰器获取到父组件传递的值//子组件html模板<p>child</p><div>{{showText}}</div>子组件类import{ChangeDetectionStrategy,Component,Input}from'@angular/core';@Component({selector:'app-my-co......
  • ES6 NO.1( var、let 和 const 命令 )| 前端小白的的第一篇博客~
    varvar声明的变量存在变量提升即在声明该变量之前就可以使用,值为undefined,其作用域为全局;let和constlet用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效;const只能用来声明常量,一旦赋值,不能修改,故使用const不能只声明不赋值;区别var和let......
  • 基于PCA的点云位姿估计与粗拼接附matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • Java 把列表元素拼接字符串
    摘要:使用JavaCollectors.joining方法把列表中的所有元素通过指定的分隔符连接字符串。目录综述使用For循环StringUtils.join函数Collectors.joining(Function)函数GuavaJoinerjoin函数String.join函数结束语综述  在项目开发中,经常遇到的一个问题就是要把得到的一个......
  • 放弃where 1 = 1,使用更优雅的SQL条件拼接
    列表接口,通常会有多个条件组合查询的业务场景。映射至mapper.xml中就需要写where1=1来拼接否则就会发生select*fromtablewhereandcolumn='value'的语法错误如今的IDEA中,如果你设置了SQL方言,就会警告你where1=1始终为true建议使用<where></where>标签来处理这......
  • Angular 复习与进阶系列 – Component 组件 の Lifecycle Hooks
    前言我们在这篇和 这篇中已经学习了几个基本的LifecycleHooks.分别是constructorOnInitAfterContentInitAfterViewInitOnDestroyOnChanges这篇我们会把其余的LifecycleHooks都学完. InitGroupandChangesGroupAngular的Lifecycle可以分为两组.第一组......
  • AngularJS 输入验证
      属性描述$dirty表单有填写记录$valid字段内容合法的$invalid字段内容是非法的$pristine表单没有填写记录......
  • AngularJS 动画
    ngAnimate做了什么?ngAnimate模型可以添加或移除class。ngAnimate模型并不能使HTML元素产生动画,但是ngAnimate会监测事件,类似隐藏显示HTML元素,如果事件发生ngAnimate就会使用预定义的class来设置HTML元素的动画。AngularJS添加/移除class的指令:ng-s......
  • 关于 Angular 12 的 inlineCriticalCss 选项
    inlineCriticalCss是Angular项目中的一个配置选项,用于指定是否将关键CSS内联到页面HTML中。通常情况下,网页中的CSS文件是由浏览器异步加载的,这意味着在浏览器加载完HTML后还需要额外的时间来加载CSS文件,这会导致页面的首次渲染时间较长,用户体验不佳。为了解决这个问......