【TypeScript学习笔记】代码中反引号的作用-多行文本输入创建多行字符串

我的需求就是在typescript中录入多行字符串。

用到了一个特性：反引号

之前在网上搜了一下，找到一篇《javascript的创建多行字符串的7种方法》，试了过后，各种不爽。

最终找到这个最不错的，反引号法！反引号字符串的另一个优点是允许多行文本：

它使用起来非常简单。如下所示：

var template = `  <div>      <h1>Hello</h1>      <p>This is a great website</p>  </div>  `; 

怎么样？是不是非常 nice  !!？

在之前写 webgl 的 shader 时，常常在 html 的 script 的标签里写，十分不方便。

有了这个神符号，就可以直接在代码里写了，很爽！

var code:string=`float restDepth(vec4 rgba){return dot(rgba, vec4(1.0, 1.0 / 255.0, 1.0 / 65025.0, 1.0 / 16581375.0));}//mainvec4 ` + this.funName + `(vec4 outColor) {float depthColor = 1.0;vec4 vPosition = ` + this.posDepthVary + `;if( vPosition.w > 0.0 ){vec3 pos = ( vPosition.xyz / vPosition.w )* 0.5 + 0.5 ;for(float ix = -1.0; ix <= 1.0; ix+=1.0){for(float iy = -1.0; iy <= 1.0; iy+=1.0){pos.x =   pos.x + ix / ` + size.x + `;pos.y =   pos.y + iy / ` + size.y + `;float shadow = restDepth( texture2D(  ` + fs0 + `,pos.xy ) );if( pos.z > shadow ){//0.0005&& pos.z - 0.00001 > shadowdepthColor -= 0.525 ;//0.035}}}depthColor = clamp( vec4(depthColor), 0.5, 1.0).x;}return outColor * depthColor  ;}`;

还支持JS变量的动态拼接。爽爽爽！

对于动态变量，还可以这样：

var a:number=10086;

var str:string=`

这个${a}好说！

`;

trace(str);//这个10086好说！

反引号怎么打？

在键盘上，它位于左上角，数字1键的左边、Esc键的下方。就是在~键上！！

在英文输入法下，直接按这个键，打出来的就是反引号 ` 

（中文输入法中，直接按这个键，打出来的是·，也就是省略号中的点）