{"id":46641,"date":"2023-07-27T10:05:00","date_gmt":"2023-07-27T17:05:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=46641"},"modified":"2023-07-27T09:47:32","modified_gmt":"2023-07-27T16:47:32","slug":"new-syntax-for-string-interpolation-in-fsharp","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/new-syntax-for-string-interpolation-in-fsharp\/","title":{"rendered":"New syntax for string interpolation in F#"},"content":{"rendered":"

We are excited to announce a new F# syntax feature that is now available in preview, designed to make working with interpolated strings easier than ever before.\nThis feature is modeled after how interpolation works in C#’s raw strings<\/a>, but maintains backwards compatibility with F#’s triple quoted strings.<\/p>\n

Interpolated strings are a very convenient way for developers to embed F# expressions into string literals.\nHowever, one scenario where working with interpolated strings can become cumbersome is dealing with text that contains many curly braces.\nThat’s where the new F# interpolation syntax comes in. <\/p>\n

Overview<\/h2>\n

One example where this new syntax can be particularly useful is when working with CSS literals in a front-end F# application, such as with Fable<\/a>.\nWith the new syntax, you can write your CSS without worrying about escaping curly braces, allowing you to focus on the interpolation expressions themselves.\nHere’s an example:<\/p>\n

\"Code<\/p>\n

\nCode<\/summary>\n
let transitionMs = 50\r\nlet css = $$\"\"\"\r\n:host {\r\n    transition-duration: {{transitionMs}}ms;\r\n    border: 2px solid lightgray;\r\n    border-radius: 10px;\r\n    margin: 5px 0;\r\n}\r\n\r\n:host.transition-enter {\r\n    opacity: 0;\r\n    transform: scale(2);\r\n}\r\n:host.transition-leave {\r\n    opacity: 0;\r\n    transform: scale(0.1);\r\n}\r\n.is-clickable {\r\n    user-select: none;\r\n}\r\n\"\"\"<\/code><\/pre>\n<\/details>\n
You don’t have to comb through all your string literals looking for {<\/code>, }<\/code> or %<\/code> characters to escape, you can just write (or copy-paste) them as you normally would.\nAnd the end result looks even more like CSS typically does, lessening cognitive effort required for any reader who is already used to reading CSS.<\/p>\n
Syntax<\/h2>\n
The new syntax is an extension of the existing syntax for interpolated strings.\nPreviously, you could add a single $<\/code> before a string literal and use {<\/code> and }<\/code> to embed F# expressions within its contents.\nYou can learn more about interpolated strings in the F# Language Reference<\/a>.<\/p>\n
Now, you can use multiple $<\/code> characters and corresponding numbers of opening and closing curly braces for interpolation, and the same rules also apply to %<\/code> characters, which have special meaning in F# interpolated strings as format specifiers.<\/p>\n
Here’s an example:<\/p>\n
\"Code<\/p>\n
\nCode<\/summary>\n
let order = 120.0M\r\nlet discount = 0.2M\r\nlet delivery = 20M\r\n$$\"\"\"\r\n{\r\n    \"order\": {\r\n        \"value\": {{order}},\r\n        \"currency\": \"USD\"\r\n    }\r\n    \"discount\": \"%%0.0f{{discount*100M}}%\",\r\n    \"shipping\": {\r\n        \"value\": {{delivery}},\r\n        \"currency\": \"USD\"\r\n    },\r\n    \"total\": {\r\n        \"value\": {{(1M-discount) * order + delivery}},\r\n        \"currency\": \"USD\"\r\n    }\r\n}\r\n\"\"\"\r\n\/\/ Produces:\r\n\/\/ {\r\n\/\/     \"order\": {\r\n\/\/         \"value\": 120.0,\r\n\/\/         \"currency\": \"USD\"\r\n\/\/     }\r\n\/\/     \"discount\": \"20%\",\r\n\/\/     \"shipping\": {\r\n\/\/         \"value\": 20,\r\n\/\/         \"currency\": \"USD\"\r\n\/\/     },\r\n\/\/     \"total\": {\r\n\/\/         \"value\": 116.00,\r\n\/\/         \"currency\": \"USD\"\r\n\/\/     }\r\n\/\/ }<\/code><\/pre>\n<\/details>\n
In case you need to create a literal with longer sequences of {<\/code> or }<\/code>, the new syntax can still be used to avoid escaping – just start with more $<\/code>s and use the same number of curly braces for interpolation.<\/p>\n
This could come up when working with a templating engine, perhaps something like Angular or Vue.js templates in a hypothetical cross-compile scenario, and it might look something like this:<\/p>\n
\"Code<\/p>\n
\nCode<\/summary>\n
let template = $$$\"\"\"\r\n<div class="{{{classAttr}}}">\r\n  <p>{{title}}<\/p>\r\n  <div><img alt="item" src="{{itemImageUrl}}"><\/div>\r\n  <button type="button" class="add" (click)="add(item)">Add<\/button>\r\n<\/div>\r\n\"\"\"<\/code><\/pre>\n<\/details>\n
Note that now triple curly braces are needed for interpolation, but double or single braces are treated as regular content of the string.<\/p>\n
Give it a go<\/h2>\n
At the moment to try this feature out, you have to use flag --langversion:preview<\/code> which you can pass to dotnet fsi<\/code> invocation or put it in your .fsproj<\/code> file within <OtherFlags><\/code>.<\/p>\n
Links to official documentation<\/h2>\n